渲染元素和组件

本文是本人自己辛苦翻译的，请转载的朋友注明，翻译于Z.MJun的 ，感谢！<翻译不容易啊>

---

翻译于2017年6月26日，原文

---

Rendering Elements
React app中元素是最小构建块。如

const element = 
Hello, world
;

与浏览器的DOM元素不一样，React的元素是对象并且容易创建。React Dom负责更新Dom的React元素。

Rendering an Element into the DOM

在Dom下渲染元素。在Html下有以下代码

React Dom就是从这个代码开始，因为所有的内容都会通过这里开始。就是纯代码写界面，写逻辑。
使用React构建应用，一般都会有一个简单的dom节点。如果在已有的项目里，你可以构建多个独立的dom节点。
渲染一个React元素到Root Dom节点里。请使用用ReactDOM.render()，如下图。

const element = 
Hello, world
;
ReactDOM.render(
  element,
  document.getElementById('root')
);

运行在浏览器上就能看到Hello, world。

Updating the Rendered Element

更新渲染对象。React的元素是不可变的。当创建了一个元素，就不能改变子元素和属性。如同，电影里面的一帧，已经在某个时间点内展示了样式。
目前的解决方案是，创建一个新的元素，然后使用ReactDOM.render()。如：

function tick() {
  const element = (
    

      
Hello, world!
      
It is {new Date().toLocaleTimeString()}.
    
  );
  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 
Hello, {props.name}
;
}

这是一个可用的React组件，接受输入和返回React元素。一般会叫组件函数，从代码上看类似JS函数。

同样可以使用ES6来定义组件，如：

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

以上两个效果是等价的。

渲染组件

React元素表达式，如下：

const element = 
;

同样，元素可以使用自定义表达式

const element = ;

当一个React的元素的表达式使用了自定义组件。那么通过JSX来使用这个组件就相当于一个简单的对象。这样的对象叫props。如：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
);

CodePen 展示下以上代码

根据上面的代码，做一个小的剖析。

• 1.使用ReactDOM.render()来引入这个元素
• 2.React调用Welcome这组件（函数），再通过参数props传入{name: 'Sara'}。
• 3.这个组件（函数），就会返回

  Hello, Sara

  。
• 4.再通过React DOM来更新内容。

重点说明：
组件名称一般会是首字母大写，驼峰式命名。
例如：

是Dom标签，则是代表组件和请求这个组件。

组件的组成部分

组件间是可以嵌套的。另外，按钮，输入框，警告，窗口在React应用里面，通常也是组件。

嵌套如下代码：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

function App() {
  return (
    

      
      
      
    
  );
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

Try it on CodePen.

一般情况下，新的React应用都会有一个简单的顶层组件。但是，在已有项目下，有可能会从一个简单组件开始入手，知道最顶层逐渐。

重点说明：
逐渐必须返回一个root元素，并且需要把组件都添加在

里面。

Extracting Components

别担心把组件切分成小的组件。
例如，Comment组件：

function Comment(props) {
  return (
    

      

        
        

          {props.author.name}
        
      
      

        {props.text}
      
      

        {formatDate(props.date)}
      
    
  );
} //这不是完整代码，看Try it on CodePen.

Try it on CodePen.

以上代码是在浏览器上显示一个用户数据，如头像，名称，时间。但是，由于使用了多层嵌套，所以要复用比较苦难，为了能够提高复用性和可读性，需要进一步解剖分解组件。

---

这里的剖析对于初学者有用，对于老司机来说可以不用看。

• 1.分解头像

function Avatar(props) {
  return (
    
  );
}

• 2.用户头像，姓名

function UserInfo(props) {
  return (
    

      
      

        {props.user.name}
      
    
  );
}

• 3.最后嵌入

function Comment(props) {
  return (
    

      
      

        {props.text}
      
      

        {formatDate(props.date)}
      
    
  );
}

Try it on CodePen.

Props are Read-Only

参数和只读。
无论定义的组件是函数还是类，输入的参数都是不能修改的。如：好的写法

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

不好的写法，在内部修改参数

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