React 笔记4：Components and Props

我们可以使用组件(Components)将UI分隔为独立的，可复用的代码块，可以独立的思考各个代码块;
一个组件就像是一个JavaScript 函数，组件可以接收参数（props），并且会返回一个用来描述页面显示内容的React Element对象

Functional and Class Components

我们可以通过一个JavaScript 的function 来定义一个组件（functional Components）

function Welcome(props) {
    return <h1>Hello,{props.name}</h1> }

另一种定义组件的方法是，通过一个 ES6 class来定义：

class Welcome extends React.Component {
    render() {
        return <h1>Hello,{this.props.name}</h1>
    }
}

上面两种定义组件的方式是等价的；
Classes 有更多的高级特性（后面章节中讨论）

Rendering a Component(渲染组件)

目前为止，我们见到的（encountered）React elements 都表示（represent）DOM tags

const element = <div />;

然而，React elements还可以用来表示用户自定义组件（uses-defined）

const element = <Welcome name="Sara"/>

当React发现一个element表示用户自定义的组件时，会把JSX的属性（attribute）传递到该组件上，作为一个单独的对象（single object），称之为props

例如，下面的代码将在页面渲染出”Hello,Sara”:

function Welcome(props) {
    return <h1>Hello,{props.name}</h1> } const element = <Welcome name="Sara"/> ReactDOM.render( element,document.getElementById('root') );

总结：
1，使用<Welcome name="Sara"/>元素调用ReactDOM.render()；
2，React 使用{name:'Sara'}作为props调用Welcome组件；
3，Welcome组件返回<h1>Hello,Sara</h1>元素；
4，React DOM 高效的更新DOM为<h1>Hello,Sara</h1>;

Caveat： Component 名称总是以大写字符开头
例如：<div/> 表示一个DOM 标签，而<Welcome />则表示一个组件（Component），而且作用域内必须定义该组件Welcome；

Composing Components（组件构成）

组件可以在其输出结果中引用其他的组件。我们可以将组件抽象出来，用在任何需要使用的地方（组件复用）

function Welcome(props) {
    return <h1>Hello,{props.name}</h1> } function App() { return ( <div> <Welcome name = "Sara" /> <Welcome name = "Cahal" /> <Welcome name = "Edite" /> </div> ); } ReactDOM.render( <App />,document.getElementById('root') );

Caveat（警示）：组件只能返回单个根元素（root element），比如：<Welcome/>元素外面包着一层<div>；

Extracting Components （提取组件）

无需担心将一个组件分隔成多个小的组件
如下：组件Comment

function Comment(props) {
    return (
        <div className="Comment"> <div className="UserInfo"> <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name}/> <div className="UserInfo-name">{props.author.name}</div> </div> <div className="Comment-text">{props.text}</div> <div className="Comment-date">{formatDate(props.date)}</div> </div> ); }

组件Comment 接收author(an object),text(a string),and data(a data)作为props，该组件由于嵌套过多，很难维护复用，所有我们需要将其提取为几个小的组件

首先，提取出Avatar组件:

function Avatar(props) {
    return (
        <img className="Avatar" src=props.user.avatarUrl} alt={prop.user.name} /> ); }

组件Avatar无需知道是否被渲染在哪个组件中，所以我们给她的prop一个通用的名字name而不是author
给组件的prop命名时，要从其本身所属组件的角度考虑，而不是被使用在哪里；

现在可以将Comment简化：

function Comment(props) {
    return (
        <div className="Comment"> <div className="UserInfo"> <Avatar user={props.author} /> <div className="UserInfo-name">{props.author.name}</div> </div> <div className="Comment-text">{props.text}</div> <div className="Comment-date">{formatDate(props.date)}</div> </div> ); }

然后我们再提取UserInfo组件

function UserInfo(props) {
  return (
    <div className="UserInfo"> <Avatar user={props.user} /> <div className="UserInfo-name"> {props.user.name} </div> </div> ); }

再简化Comment组件：

function Comment(props) {
    return (
        <div className="Comment"> <UserInfo user={props.author} /> <div className="Comment-text">{props.text}</div> <div className="Comment-date">{formatDate(props.date)}</div> </div> ); }

Props are Read-Only

无论你将一个组件声明为一个函数或类，它都不能修改自己的props

function sum(a,b) {
    return a+b;
}

上面的function被称为“pure function”,因为该方法没有去修改输入的值，而且当输入的值一样时则输出的结果也是一样的，而作为对比，下面的方法则是”impure function”:

function(account,amount) {
    account.total -= amount;
}

React是相当灵活的（flexible ），但是有一条严格的规定：
All React components must act like pure functions with respect to their props.