react 小记

react小记

1. react的jsx语法跟JavaScript不兼容，凡是使用JSX的地方，script　标签中都要加上type="text/babel"　

2. 所有组件类必须有自己的render　方法，用于输出组件，　组件类的第一个字母必须大写，组件类只能包含一个顶层标签

3. 添加组件属性注意将class写成className ,for 属性写成htmlFor ，因为class 和 for　是JavaScript 的保留字

4. 可以给组件标签加上属性，在组件内部通过this.props对象获取

5. this.props.children 属性表示组件的所有子节点，可以用React.Children.map来遍历子节点

6. propTypes使用：

   (1)安装库：　npm install --save prop-types

   (2)引入: `import PropTypes from ‘prop-types’

   (3)在类中使用：

   class YourClass extends Component {

   ​ static propTypes ={

   ​ name: PropTypes.object // name是你使用的类中的一个属性

   ​ }

   }

7. ref获取真正的DOM节点，因为组件并不是真实的DOM节点，而是存在与内存之中的一种数据结构，叫做虚拟DOM，组件渲染中可以有ref属性，在回调事件中用this.refs.[refName]可以返回这个真实的DOM节点，但是这个属性必须等到寻觅DOM插入文档以后才能使用，否则会报错

8. 用getInitialState方法可以定义初始状态

   getInitalState ()　{

   ​ return {XXX: false}

   }

   使用this.state读取初始状态，this.setState方法修改状态值

9. this.props表示那些一旦定义，就不再改变的特性；this.state是会随着用户互动而产生变化的特性。

10. 表单中的内容不能用this.props获取，input textarea select radio等元素的值不能通过this.props.value读取，而是定义一个onChange事件的回调函数，通过event.target.value读取用户输入的值

11. 组件的生命周期：will函数在进入状态之前调用，did函数在进入状态之后调用

    componentWillMount()

    componentDidMount()

    componentWillUpdate(object nextProps, object nextState)

    componentDidUpdate(object prevProps, object prevState)

    componentWillUnmount()

12. 组件的style属性设置方式不能写成

    style=”color: {this.state.color}”

    而要写成：

    style={{color: this.state.color}}

    其中，第一层大括号表示这是JavaScript语法，第二重大括号表示样式对象

13. 网络请求：　使用componentDidMount方法设置api请求，等到请求成功，使用this.setState方法重新渲染UI