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

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

const element = <div />;

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

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

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')
);

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>
  );
}

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

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>
  );
}

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>
  );
}

在CodePen中试一试。

提取组件也许看起来像很枯燥的工作，但是拥有一系列可复用的组件会在大型应用中起到很好的效果。有一个很好的经验法则就是如果有一部分UI已经被使用多次（如Button，Panel，Avatar），或者组件本身已经足够复杂（如APP，FeedStory，Comment），那么使它成为一个可复用的组件会更合适。

props是只读的

如果你声明了一个组件使用函数或者类，那么它永远不能修改它自己的props。看看这个sum函数：

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

这样的函数被称为“纯函数”因为它们不尝试改变它们的输入，而且在输入同样的情况下一直返回一样的结果。

相比之下，这个函数就不是纯函数因为它改变了输入：

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