react 学习笔记（二）

这次主要针对react state和props这两个元素进行分析

state： 在react只需更新组件的state, 然后就可以根据state来重新渲染组件，也就是说state是组件的一个状态

组件中用到的一个变量是不是应该作为组件State，可以通过下面的4条依据进行判断：

1.这个变量是否是通过Props从父组件中获取？如果是，那么它不是一个状态。
2.这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。
3.这个变量是否可以通过其他状态（State）或者属性(Props)计算得到？如果是，那么它不是一个状态。
4.这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更
适合定义为组件的一个普通属性，例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer

特点

• 不能直接修改state.
  直接修改state, 组件并不会更新render.例如：

// error
 this.state.title = 'title'
// right
this.state.setState({title: 'title'})

• state 的更新是异步的
  调用setState, 组件的state并不会改变， setState只是把修改的状态放入到一个对列中，react会优化正真的执行时间。计算后的state不能保证是最新的
  对于一个按钮多次点击的情况，如果直接设置state，可能只会加1， react内部会认将多次合并成一次

// 可以采取这种方法
this.state((preState, props) => ({
  counter: preState.num + 1;
})

小tips:
总得来说这个有点类似vue中得v-model

props： 用于父组件向子组件传值；但是props是不被允许修改的
一定要写PropTypes，切莫为了省事而不写
如果一个Props不是requied，一定在getDefaultProps中设置它
React.PropTypes主要用来验证组件接收到的props是否为正确的数据类型，如果不正确，console中就会出现对应的warning。出于性能方面的考虑，这个API只在开发环境下使用。

父组件用法

  <Parent children="yaobo"></Parent>

子组件

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // This must be exactly one element or it will warn.
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = { // 这个要记得写
  children: PropTypes.element.isRequired
};

也可以设置默认的props

Greeting.defaultProps = {
 name: 'Stranger'
};

也可以在 getDefaultProps 中进行设置
官网推荐： https://reactjs.org/docs/typechecking-with-proptypes.html

参考文章：
https://www.jianshu.com/p/c6257cbef1b1