渲染元素和组件
本文是本人自己辛苦翻译的，请转载的朋友注明，翻译于Z.MJun的简书 ，感谢！<翻译不容易啊>
翻译于2017年6月26日，原文
Rendering Elements
React app中元素是最小构建块。如
const element = <h1>Hello, world</h1>;
与浏览器的DOM元素不一样，React的元素是对象并且容易创建。React Dom负责更新Dom的React元素。
Rendering an Element into the DOM
在Dom下渲染元素。在Html下有以下代码
<div id="root"></div>
React Dom就是从这个代码开始，因为所有的内容都会通过这里开始。就是纯代码写界面，写逻辑。
使用React构建应用，一般都会有一个简单的dom节点。如果在已有的项目里，你可以构建多个独立的dom节点。
渲染一个React元素到Root Dom节点里。请使用用ReactDOM.render()，如下图。
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
运行在浏览器上就能看到Hello, world。
Updating the Rendered Element
更新渲染对象。React的元素是不可变的。当创建了一个元素，就不能改变子元素和属性。如同，电影里面的一帧，已经在某个时间点内展示了样式。
目前的解决方案是，创建一个新的元素，然后使用ReactDOM.render()。如：
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
以上代码是，每秒修改一次时间，效果如下：
DOM inspector showing granular updates
React Only Updates What's Necessary
React Dom对比元素和其子元素的上一个，并只要求Dom更新到想要的效果。
Components and Props
组件可以使得UI切分成多个独立的快，使用性更好，并且更好维护。从概览上说，组件更像是JS方法，能够接受任意的输入(called "props")并把效果展示在界面上。
Functional and Class Components
函数和组件类，最简单的定义组件方法是写一个JS的函数，如：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
这是一个可用的React组件，接受输入和返回React元素。一般会叫组件函数，从代码上看类似JS函数。
同样可以使用ES6来定义组件，如：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
以上两个效果是等价的。
渲染组件
React元素表达式，如下：
const element = <div />;
同样，元素可以使用自定义表达式
const element = <Welcome name="Sara" />;
当一个React的元素的表达式使用了自定义组件。那么通过JSX来使用这个组件就相当于一个简单的对象。这样的对象叫props。如：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
根据上面的代码，做一个小的剖析。
- 1.使用
ReactDOM.render()来引入<Welcome name="Sara" />这个元素 - 2.React调用
Welcome这组件（函数），再通过参数props传入{name: 'Sara'}。 - 3.这个组件（函数），就会返回
<h1>Hello, Sara</h1>。 - 4.再通过React DOM来更新内容。
重点说明：
组件名称一般会是首字母大写，驼峰式命名。
例如：<div />是Dom标签，<Welcome />则是代表组件和请求这个组件。
组件的组成部分
组件间是可以嵌套的。另外，按钮，输入框，警告，窗口在React应用里面，通常也是组件。
嵌套如下代码：
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')
);
一般情况下，新的React应用都会有一个简单的顶层组件。但是，在已有项目下，有可能会从一个简单组件开始入手，知道最顶层逐渐。
重点说明：
逐渐必须返回一个root元素，并且需要把组件都添加在<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>
);
} //这不是完整代码，看Try it on CodePen.
以上代码是在浏览器上显示一个用户数据，如头像，名称，时间。但是，由于使用了多层嵌套，所以要复用比较苦难，为了能够提高复用性和可读性，需要进一步解剖分解组件。
这里的剖析对于初学者有用，对于老司机来说可以不用看。
- 1.分解头像
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
- 2.用户头像，姓名
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
- 3.最后嵌入
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>
);
}
Try it on CodePen.
Props are Read-Only
参数和只读。
无论定义的组件是函数还是类，输入的参数都是不能修改的。如：好的写法
function sum(a, b) {
return a + b;
}
不好的写法，在内部修改参数
function withdraw(account, amount) {
account.total -= amount;
}
