React

React优点

• 组件化
  将一个应用拆分为组件的形式再进行组合,而对于每个组件来说,将应用状态和DOM进行拆分,最终提高了项目的后期可维护性。
• 虚拟DOM
  虚拟DOM的出现,使react不需要每次状态改变都去访问DOM。而是生成新的虚拟DOM,和之前的虚拟DOM 进行对比,然后将改变的部分进行渲染。降低了访问DOM的成本,使其具有高性能。

React缺点

• 虚拟DOM。这是react的优势也是有很大缺点的。首先,每次小小状态改变都要去生成新的虚拟DOM,如果这个虚拟DOM的结构复杂无疑带来很多开销。其次,我们需要改变一个子组件的数据,但数据来于父级。这时候,子组件的兄弟组件都会被重新执行render,生成虚拟DOM。还有,在做列表的时候,都必须加上key 来提高性能。react本身并不能很好的处理这些问题,必须我们人为的通过添加key,通过shouldComponentUpdate方法比较,immutable等方法去提升性能。
• 视图层。只使用react本身是不能构建一个合格的应用的,必须结合周边各种库的辅助。

Props & State

• 子组件和父组件之间可以通过Props进行数据的传递。
• State表示组件的当前状态,通过改变state进行页面的重新渲染。
• 兄弟组件之间,通过状态提升,把子组件的state数据提升至其共同的父组件当中保存。之后父组件可以通过props将状态数据传递到子组件当中,实现通信。

react-lifecycle.png

组件实例化创建

• getDefaultProps
  作用于组件类,设置默认的props,只调用一次。es6中使用静态属性static defaultProps表示。
• getInitialState
  实例创建时调用一次,设置默认state。es6中可以在constructor中设置this.state表示。
• componentWillMount
  组件渲染前调用,这里可以修改state值,而不会再次触发render。
• render
  根据props和state创建虚拟DOM。
• componentDidMount
  渲染结束后调用,修改state将被渲染。可以通过findDOMNode去获取修改DOM。服务器端无法使用componentDidMount。

组件更新

• componentWillReceivePorps(nextProps)
  属性改变时调用,nextProps为更新后的props,这里容易混淆。
• shouldComponentUpdate(nextProps, nextState)
  nextProps,nextState分别为更新后的属性和状态。通常我们在这里判断属性和状态是否改变,是否需要重新渲染。如果返回true将渲染,false不会。
• componentWillUpdate(nextProps, nextState)

组件更新渲染前调用,可以设置state。

• componentDidUpdate()
  组件渲染后调用,修改state将被渲染。可以通过findDOMNode去获取修改DOM。

组件卸载

• componentWillUnmount
  组件将被卸载时调用,一般用来清除事件监听和定时器。