ReactJS自习第贰夜

发现一个好用的网站caniuse.com

caniuse.com(我能用么)，在这个网站上你可以查看你所引入的模块被哪些浏览器支持，非常清晰。示例图如下：

caniuse.com示例

react组件

component是react的一大特性，以标签的形式模块化的组织视图及其功能。component类的方法可以有以下几种：事件处理方法、组件生命周期方法、render方法以及初始化方法。其中render方法必须有，return的结果就是页面要渲染呈现的内容。事件处理方法的使用是将其绑定在render结果中的某个（些）标签上，在触发特定事件后进行调用。
参考资料
Thinking in React

react 组件life-cycle

• 初始化阶段
  getDefaultProps
  在组件创建的时候调用，即使用React.createClass()时，定义默认的props，保证父组件没有传入参数时props仍有值可用。
  getInitialState
  初始化this.state，只在组件Mount前调用一次。state属性用来标记组件内部状态的变化，是控制组件视图变化的重要手段。除了使用getInitialState方法外，ES6也可使用构造器进行初始化。

constructor(props) {
    super(props);
    this.state = { count: props.initialCount };
  }

• 组件装载阶段
  componentWillMount
  只在render之前调用一次，可以调用setState改变状态。
  componetDidMounnt
  只在render之后调用一次，可以调用findDOMNode(this)查找组件结点。
  render之后调用
• 组件更新阶段
  (以下方法不会在首次render的时候调用)
  componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
• 组件卸载阶段
  componentWillUnmount

react的props和state

super(props)是什么意思？
state是class才具备的特性，所以要使用state的组件必须用class myClass extends React.Component()创建，而不是函数对象的形式创建。state的初始化是在constructor类构造器中为this.state赋值。
react中调用setState方法设置state的值，会触发组件重新render。

react事件

react事件分为两种，一种是js原生事件，在生命周期函数componentDidMount中使用addEventListener进行绑定，一种是合成事件，使用jsx在组件中进行绑定操作，

（尽量显式的将事件处理函数绑定到组件实例）。合成事件符合w3c标准，其好处是会以事件委托(event delegation)的形式绑定到最上层组件，并在组件卸载时自动销毁。而原生事件需要在componentWillUnmount阶段使用removeEventListener手动解除绑定。

react的DOM操作

• 获取组件对应的DOM元素
  组件加载后，可以使用ReactDOM.findDOMNode()来获取，需要注意的是findDOMNode不能获取到无状态的组件。
• refs
  为元素设置ref属性，可在组件内部对元素进行访问，而且是唯一可靠的方式，如this.refs.name，需要注意的是ref不能设置在无状态组件上（无状态组件指的是没有生命周期函数、没有设置state变量的组件）。

react条件渲染

http://www.css88.com/react/docs/conditional-rendering.html