React docs V15.6.1 快速上手纪要

React docs V15.6.1 快速上手纪要

准备把docs看一遍,先把快速上手quick start看了遍,记录下一些docs里面的注意事项

  1. 实际应用中,React 的app只调用ReactDOM.render()一次
  2. component总是以大写字母开头的
  3. component只能返回一个单根元素
  4. 所有的React component都要像pure functions一样不改变props的值
  5. 只能在constructor里面来赋值this.state
  6. state的更新可能是异步的,所以修改state的时候应该像下面这样

    1
    2
    3
    4
    5
    6
    7
    8
     // 错误的更新方式
    this.setState({
    counter : this.state.counter + this.props.increment
    });
    // 正确的更新方式
    this.setState((prevState, props) => ({
    counter : prevState.counter + props.increment
    }));
  7. React 有可能会合并多个setState() 到一个来提升性能

  8. 在React中,不能使用return false来阻止默认的行为。你必须调用preventDefault()来实现。比如

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function ActionLink() {
    function handleClick(e){
    e.preventDefault();
    console.log("The link was clicked.");
    }

    return (
    <a href="#" onClick={handleClick}>
    Click me
    </a>
    );

    }
  9. 绑定事件,在React中需要用bind来绑定this, 方法有几种

    (1)在constructor里面绑定this

    (2)使用property initializer syntax 属性初始化语法(ps:不知道这个翻译对不对)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    class LoggingButton extends React.Component {
    // 这种语法确保了'this'是绑定在handleClick
    // 警告:这只是一个 ‘实验’ 的语法
    handleClick = () => {
    console.log('this is:', this);
    }

    render() {
    return (
    <button onClick={this.handleClick}>
    Click me
    </button>
    );

    }
    }

    (3)使用箭头函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    class LoggingButton extends React.Component {
    handleClick() {
    console.log('this is:',this);
    }
    render() {
    // 这种语法确保了‘this’ 绑定在handleClick
    return (
    <button onClick={(e) => this.handleClick(e)}>
    Click me
    </button>
    );

    }
    }

    用(3)这种语法的问题是,每一次创建loggingButton的时候都会创建一个不同的callback, 一般情况下是没问题的。但是如果callback作为props传给后面的components,那么就会导致后面的components 重新render, 这会导致性能问题。所以还是建议在constructor里面的bind

  10. Keys帮助React标示哪些元素被改变了,增加了或者移动了。在数组里面,应该给出keys来给元素一个稳定的标示

  11. 一个好记忆的规则就是,在map()里面的元素需要keys