关于react，我所知道的

2018-04-04

react学习资料推荐

Demo练习实现

JSX

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

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

TO
DOM元素

Virtual DOM 算法实现

React的diff策略

策略一：忽略Web UI中DOM节点跨层级移动；（tree diff）
策略二：拥有相同类型的两个组件产生的DOM结构也是相似的，不同类型的两个组件产生的DOM结构则不近相同（component diff）
策略三：对于同一层级的一组子节点，通过分配唯一唯一id进行区分（key值）（element diff）

state

setState 方法由父类 Component 所提供。当我们调用这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上。
所有的修改使用setState方法
当调用 setState 的时候，React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到 state 当中
传函数-参数为prevState
没有 state 的组件叫无状态组件
React.js 非常鼓励无状态组件
React.js 认为所有的状态都应该由 state 控制，只要类似于 <input />、<textarea />、<select /> 这样的输入控件被设置了 value 值，那么它们的值永远以被设置的值为准。值不变，value 就不会变化

props

父组件可以通过props传参数和方法给子组件
可配置defaultProps
尽量少地用 state，尽量多地用 props
向父组件传递数据：通过props向子组件传入一个回调函数，调用该回调函数时传入state

状态提升

当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为。
对于不会被多个组件依赖和影响的状态（例如某种下拉菜单的展开和收起状态），一般来说只需要保存在组件内部即可，不需要做提升或者特殊的管理。

生命周期

加载阶段
-> constructor()：组件的 state 的初始化工作
-> componentWillMount()：组件的启动工作，例如 Ajax 数据拉取、定时器的启动
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()：有些组件的启动工作是依赖 DOM 的，例如动画的启动，而 componentWillMount 的时候组件还没挂载完成，所以没法进行这些启动工作，这时候就可以把这些操作放在 componentDidMount 当中
// 即将从页面中删除
-> componentWillUnmount()：数据的清理，例如定时器的清理
// 从页面中删除
更新阶段
-> shouldComponentUpdate(nextProps, nextState)：你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。
-> componentWillReceiveProps(nextProps)：组件从父组件接收到新的 props 之前调用。
-> componentWillUpdate()：组件开始重新渲染之前调用。
-> componentDidUpdate()：组件重新渲染并且把更改变更到真实的 DOM 以后调用。

容器类组件

this.props.children 【Array】

高阶组件

高阶组件是一个函数（而不是组件），它接受一个组件作为参数，返回一个新的组件。这个新的组件会使用你传给它的组件作为子组件
高阶组件的作用是用于代码复用，可以把组件之间可复用的代码、逻辑抽离到高阶组件当中。新的组件和传入的组件通过 props 传递信息

context

某个组件只要往自己的 context 里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。
一个组件的 context 只有它的子组件能够访问，它的父组件是不能访问到的.
getChildContext 这个方法设置 context ，它返回的对象就是 context
父组件 childContextTypes 验证 getChildContext 返回的对象
子组件 contextTypes 声明和验证需要获取的状态的类型

Pure Component

一个组件的渲染只依赖于外界传进去的 props 和自己的 state，而并不依赖于其他的外界的任何数据，也就是说像纯函数一样，给它什么，它就渲染什么出来。

Dumb Component

对参数（props）以外的数据零依赖

react-redux

connect。connect 接受一个参数 mapStateToProps，然后返回一个函数，这个返回的函数接受一个组件作为参数，把这个组件包含在一个新的组件 Connect 里面，Connect 会去 context 里面取出 store。然后把 store 里面的数据取出来通过 props 传给组件。
mapStateToProps。每个传入connect的组件需要 store 里面的数据都不一样的，所以除了给高阶组件传入 Dumb 组件以外，还需要告诉高级组件我们需要什么数据，高阶组件才能正确地去取数据。react-redux会把传入Connect的prop和state都作为prop传给Dump。
Provider 容器组件，把嵌套的内容原封不动作为自己的子组件渲染出来。同时把外界传给它的 props.store 放到 context，使业务代码不接触context

组件设计

├── component 不做任何数据处理，所有和外部状态有关联的数据来自container传过来的prop，与外部状态无关联的数据来自自身state，所有组件与redux无连接，仅负责逻辑处理
│ ├── Pure Component
│ └── Dumb Component
│
└── container 负责调用action变更数据，将数据作为prop传给component中的组件
│
└──page 页面