React使用过程中常用的技术点记录

发表于

最近在公司的项目中开始用 React ，没错就是原生的 React 而不是结合 Redux 等什么的，记录一下在开发过程中遇到的各种问题以及对应的解决方法，希望能对读者有所帮助。

React原则

React不多做介绍，就是Facebook的一个开源JS框架，专注的层面为View层，不包括数据访问层或者那种Hash路由（不过React 有插件支持），与Angularjs，Emberjs等大而全的框架不同，React专注的中心是Component，即组件，React认为一切页面元 素都可以抽象成组件，比如一个表单，或者表单中的某一项。

常用的技术要点

props

每一个组件都有可变与不可变的属性，props就是不可变的属性，当props改变时，组件的绘制方法不会被调用。

states

states就是组件的可变属性，states的改变会触发组件的render函数，react与其他mvvm框架的最大的不同点就是，react 组件可以想象成一个状态机，状态的改变会重绘UI，然后根据 dom diff算法来绘制UI，而其他的mvvm框架则是对js对象的dirty check（Angularjs）或者defineProperty时指定的回调函数（Emberjs），因此，状态机制与dom diff的存在声称React更快。

Refs和findDOMNode()

为了同浏览器交互，我们有时候需要获取到真实的DOM节点。我们可以通过调用React的React.findDOMNode(component)获取到组件中真实的DOM。

查看官方源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
    React.findDOMNode(this.refs.myTextInput).focus();
  },
  render: function() {
    // The ref attribute adds a reference to the component to
    // this.refs when the component is mounted.
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

React.render(
  <MyComponent />,
  document.getElementById('example')
);

componentWillMount

渲染前调用一次，这个时候DOM结构还没有渲染。

componentDidMount

渲染完成后调用一次，这个时候DOM结构已经渲染了。这个时候就可以初始化其他框架的设置了，如果利用jQuery绑定事件等等。

componentWillReceiveProps

初始化渲染不会调用，在接收到新的props时，会调用这个方法。

shouldComponentUpdate

初始化渲染不会调用，接收到新的props或state时调用。

componentWillUpdate

初始化渲染不会调用，更新前调用。

componentDidUpdate

初始化渲染不会调用，更新后调用。

componentWillUnmount

组件移除前调用。