【React】React.js 小书笔记

阅读一下React.js小书。

前言

这是React类组件的生命周期。React中的Component封装了构建整个用户界面的基本构建块。为了组件的可复用和独立性，每个组件维护一个自己的状态（state）和接收来自父组件的参数（props）。

JSX

使用jsx也是React的特点之一：声明式编程，即只需描述界面长什么样，不需要手动操作DOM来实现，由React来负责DOM更新。
JSX就是JS的一种语法扩展。使用JS对象来表示DOM元素的结构：标签名，属性，子元素。

<div class='box' id='content'>
  <div class='title'>Hello</div>
  <button>Click</button>
</div>

DOM可以用一个嵌套的对象来表示。比如上面的HTML可以表示成这样的对象：

{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}

通过JSX可以在js代码里编写类似HTML标签结构的语法，更方便直观，只要在编译过程中将jsx标签转化成js对象结构就行了。
React.createElement 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等。
ReactDOM.render就是根据JSX对象构造DOM元素，再插入到页面上。

将转化成JS对象和转化成DOM对象拆分开来，原因：

• 方便渲染到不同的设备上，例如浏览器DOM，canvas或者原生App上。
• 修改js对象比直接修改DOM元素更快，且减少浏览器重排。

列表渲染

class Index extends Component {
  render () {
    return (
      <div>
        {users.map((user, i) => <User key={i} user={user} />)}
      </div>
    )
  }
}

📣注意一定要加key！因为React使用虚拟DOM来更新，如果不加入key，虚拟DOM不知道你是修改了列表还是只是交换了列表项的位置。

状态提升

当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为。
对于被多个组件依赖的状态，可以使用Redux这样的状态管理工具来解决。

高阶组件

高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件作为子组件。

高阶组件的作用是用于代码复用，可以把组件之间可复用的代码、逻辑抽离到高阶组件当中。新的组件和传入的组件通过 props 传递信息。

把加载、保存数据的逻辑也抽出，构建一个输入组件的组件，进行逻辑复用。