React component and lifecycle

One

React Components

React component is the core of the essence. Component has input, output, and its own state , respectively The props, the render, State , I believe a little used React students are clear.

Value and pass method call between components .

Parent component subassembly to pass values

Parent component by passing properties, obtained by The props sub-assembly, and this transfer vue in the same, but different receiving FIG follows:

Parent component is passed to item attribute values subassembly

Subassembly receiving item values props

Value transmitted to the parent sub-assembly components

Data passed through a callback

Parent component by transfer function property handleDelete

Subassemblies by receiving and transmitting function handleDelete index value performs the functions parent component.

Between the traditional values brothers components

Data passed through the same parent component
Passed through the publish / subscribe
Use context is passed
Use redux unified management of state

two

React Lifecycle

React lifecycle broadly divided into three stages: mount, rendering, uninstall

Mount uninstall process

1.1.constructor()

completion constructor () React in the initialization data, it accepts two parameters: props and context, when you want to use these two parameters within the function, use super () passing in two parameters.
Note: Just use the constructor () must write super (), otherwise it will lead to this point error.

1.2.componentWillMount()

componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。

1.3.componentDidMount()

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染。

1.4.componentWillUnmount ()

在此处完成组件的卸载和数据的销毁。

2.更新过程

2.1componentWillReceiveProps (nextProps)

在接受父组件改变后的props需要重新渲染组件时用到的比较多
接受一个参数nextProps
通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

2.2.shouldComponentUpdate(nextProps,nextState)

主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断。

2.3.componentWillUpdate(nextProps,nextState)

shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。

2.4.componentDidUpdate (prevProps, prevState)

After the component has been updated, react only once in the first successful initialization will enter componentDidmount, after each re-rendering will enter this life cycle, where you can get prevProps and prevState, that is updated before the props and state.

2.5.render()

There are minimal differences in the render function inserts dom structure jsx generated, react will generate a virtual dom tree, at every component update, this will react through the old and new DOM tree before and after its diff algorithm compares the updated, more later, to find DOM node and re-render.

Lifecycle icon