React生命周期及组件和其通信方式

一.React 生命周期

	• 参考网址：https://www.jianshu.com/p/eac35ef92e4c
	• 第一次执行
		a. 处理属性（获取默认值和校验传递属性的类型）
		b. 处理状态（执行constructor获取初始的状态信息）
		c. componentWillMount第一次组件渲染之前
			ⅰ. 从服务器获取数据（把获取的数据重新赋	值给状态或者存放到Redux）
		d. render:第一次或者重新进行视图的渲染
		e. componentDidMount:第一次渲染完成
			ⅰ. 此处可以获取到DOM元素了
	• 更新状态
		f. shouldComponentUpdate是否应该更新组件（组件的性能优化）
			ⅰ. 当我们执行setState等操作，首先触发的是当前钩子函数
			ⅱ. this.state当前的状态（改之前的状态），nextState即将要修改的状态信息，this.props和nextProps同理
			ⅲ. 钩子函数返回true代表允许重新渲染视图，反之false则停止继续渲染视图
			ⅳ. shouldComponent这个钩子函数，根据钩子函数返回true或者是false决定状态是否重新渲染组件（无论返回啥，状态本身值都已经修改了）
			ⅴ. forceUpdate强制更新（重新渲染），不会执行shouldComponentUpdate这个钩子函数
		g. componentWillUpdate更新数据之前
		h. render执行
		i. componentDidUpdate更新数据之后
	• 更新属性
		j. componentWillReceiveProps当父组件重新渲染，子组件也会重新渲染，首先触发此钩子函数
		k. 更新状态流程执行
	• 卸载
		l. componentWillUnmount即将卸载组件之前一般在这个方法中 清除定时器和绑定的事件

二.React的组件

• 每一个组件都是一个单独的个体（数据私有、有自己完整的生命周期）
• 创建react组件有三种方式
• 函数式组件
• 基于React.Component类创建组件
• REACT HOOKS
• react支持单闭合标签组件调用（vue不支持）
• 调取组件的时候，可以单闭合也可以双闭合，双闭合好处：可以在标签继续设置子元素（类似于vue中的solt），调取组件的时候会把子元素(JSX对象)基于props.children传递给组件
• 组件的名字首字母必须大写，为了和内置的组件区分开
• 组件每使用一次，当前的组件函数都会执行一次
• 如果需要传入一个对象，那么需要对对象进行...展开，然后放入行间属性
• 删除组件 ReactDOM.unmountComponentAtNode(window.root);

2.1 函数式组件

只要让函数返回一个JSX元素就是函数式组件
特点：简单（开发简单，渲染也快），但是一旦组件被调用，里面的内容渲染完成，当前组件中的信息基本上就不变了（除非：重新调用组件传递不同的属性信息）=>‘静态组件’：没有state状态管控内容随时变化，也没有生命周期函数等
函数式组件不能像类组件一样，基于prop-types给属性设置默认的规则
	• props是函数组件的参数（props只可读，不可改），可以用来接收通过行内属性传递过来的属性，其中有个children属性为标签内写的内容，React.Children属性还有几个方法可以处理多个children的渲染
	• React.Children.map:遍历传进来的jsx对象（子元素 props.children）
	• React.Children.count(props.children)：返回数组（props.children）的长度

2.2 类组件

当ReactDOM.render渲染的时候，如果发现虚拟dom中type是一个类组件，创建这个类的实例，并且把解析出来的props传递给这个类：new Clock(props) =>先执行constructor（此时props并未挂载到实例上，基于this.props不能获取到值，但是可以直接使用形参中的peops；解决方法：super(props)这样在constructor中也可以用this.props）=>当constructor执行完，React会帮我们继续处理：把props/context挂载到实例上（后期在其他的钩子函数中可以基于this.props获取传递的属性值），React帮我们把render方法执行

2.3 给传递的属性设置规则（prop-types）

• 官方网址：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper
• 基于第三方插件prop-types设置属性的规则：默认值和其他规则
	• $ yarn add prop-types
• 设置默认值
	• static defaultProps={xxx:xxx}
• 其他设置
	• static propTypes={xxx:PropTypes.stying}
	• PropsTypes.isRequired必须传递
	• PropTypes.string/bool/number/func/object/symbol/node(元素对象)/element(JSX元素)/instanceOf(xxx)必须是某个类的实例/oneOf(['News','Photos'])多个中的一个/oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)])多个类型中的一个
• 和vue一样，我们设定的规则不会阻碍内容的渲染，不符合规则的在控制台报错

2.4 React的状态管理

数据管控（model）
	属性 props
	状态 state（私有状态，redux公共状态管理）
	属性什么时候能改：设置默认值、让父组件重新调取子组件传递不同的属性、把获取的属性赋值给组件的状态，后期修改状态也可以
setState
	每一次修改状态应该基于:setState方法(相对于this.state.xxx=xxx来说，不仅更改了状态，还会通知视图重新渲染)
	this.state.time='哈哈哈'; //这样可以修改状态信息，但是不会通知组件重新渲染
	this.forceUpdate(); //强制渲染视图
	setState有两个参数，第一个参数传入一个对象（里面是要修改的值），第二个参数传入一个函数（这个函数在渲染视图完后才能后执行）

class Counter extends Component{
    constructor(){
        super();
        this.state = {count:0}
    };
    handleClick = ()=>{
        // setState方法会进行合并 setState有两种写法 一种是对象一种是函数
        /*this.setState({count:this.state.count+1});
          this.setState({count:this.state.count+1});*/
        //this.setState((prevState)=>({count:prevState.count+1})); //如果返回的就是一个对象可以用小括号包裹
        //this.setState((prevState)=>({count:prevState.count+1}));
        // 下一个状态是依赖于上一个状态时需要写成函数的方式
        this.setState({count:this.state.count+1},function () {
            this.setState({count:this.state.count+1});
        }); // 这个写法等同于 this.setState((prevState)=>({count:prevState.count+1}));
    };
    render(){
        console.log('render');
        return (
            <p>
                {this.state.count}
                <button onClick={this.handleClick}>+</button>
            </p>
        )
    }
}
ReactDOM.render(<Counter/>,window.root);

2.5 受控组件和非受控组件

基于状态（或者属性）的更新来驱动视图渲染的组件叫做受控组件（受状态管控的组件）
非受控组件：不受状态管控的组件

2.6 组件之间信息传递

1.（父组件）向（子组件）传递信息
	主要是通过 prop进行传值
2.（父组件）向更深层的（子组件） 进行传递信息  >>利用（context）
	利用（context）
3.（子组件）向（父组件）传递信息
	依赖 props 来传递事件的引用，并通过回调的方式来实现的。
4.没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）
	引入一个PubSubJS 库，通过这个库你可以订阅的信息，发布消息以及消息退订。
5.利用react-redux进行组件之间的状态信息共享
	利用react-redux实现数据 方法 共享