React组件知识点

  1. 组件类首字母必须大写；
  2. 所有的组件类必须有自己的render方法，用来输出组件；
  3. 组件类只能包含一个顶层标签，否则会报错；
  4. 组件的用法和原生的HTML标签完全一致，可以任意加入属性；
  5. 属性可以在组件类的this.props对象上获取；
  6. class属性要写成className，for属性要写成htmlFor，因class，for是JS保留字；
  7. this.props和组件属性一一对应，除了this.props.children;
  8. this.props.children表示组件的所有子节点；
  9. this.props.children的值有三种可能：
    • 如果当前组件没有子节点，它就是undeifned；
    • 如果有一个子节点，数据类型是object；
    • 如果有多个节点，数据类型是array；
  10. React提供一个工具方法React.Children来处理this.pops.children，而不必担心数据类型问题；
  11. 组件类的propTypes属性用来验证组件实例的属性是否符合要求； 
    propTypes: {
    title: React.PropTypes.string.isRequired,
}
  12. getDefaultProps方法可以用来设置组件属性的默认值； 
    getDefaultProps: function() {
	return {
		title: 'hello world'
	};
}
  13. 如果需要在组件中获取真实的DOM节点，就需要用到ref属性；
  14. 由于this.refs.[refName]获取的是真实的DOM，所以必须等到虚拟DOM插入文档之后才能使用这个属性；
  15. React将组件看成是一个状态机，getInitialState用来定义初始状态，也就是一个对象，这个对象可以通过this.state来读取；
  16. this.setState方法用来修改状态值，每次修改之后会自动调用this.render方法重新渲染；
  17. this.props表示那些一旦定义，就不再改变的特性，而this.state是会随着用户互动而产生变化的特性；
  18. 对于表单，需要通过event.target.value来读取用户输入的值；
  19. 组件的生命周期分为三个状态:
    • Mounting: 已插入真实DOM
    • Updating: 正在被重新渲染
    • Unmounting: 已移出真实DOM
  20. React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数：
    • componentWillMount()
    • componentDidMount()
    • componentWillUpdate(object nextProps, object nextState)
    • componentDidUpdate(object prevProps, object prevState)
    • componentWillUnmount()
  21. React还提供两种特殊的处理函数：
    • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
    • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用