2-从零开始学react-深入state，组件通讯，生命周期，受控组件

keyword

state, setState
组件通讯
生命周期
受控组件

state

1. state 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。
2. 不要直接修改 State，而是应该使用 setState()
3. setState做的是浅合并 Object.assign,只更新需要更新的值
4. 调用setState后会触发生命周期，重新渲染。
5. 异步：react会凑齐一批，再一次性更新渲染，保证渲染性能。所以你不要依赖他们的值来更新下一个状态。
6. setState第一个参数可以接受一个函数，这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

7. 第一参数为对象，可以接受第二个参数。setState(state[, cb]) // cb更新完成回调

组件通信

父-》子

父传入props到子组件，子组件不能修改父组件传入的props

子-》父

子自己不能修改父组件传入的props。父组件可以提供函数props，让子组件调用。

• demo: 子组件Child中的name来自父组件，但是想要修改name, 通过调用父组件提供的changName即可。

// 父 App.js
import React from 'react';
import Child from './Child';

class App extends React.Component {
  state = {
    name: '小美'
  }
  changName = (val) => {
    this.setState({
      name: val
    })
  }
  render() {
    const {name} = this.state;
    return (
      <div>
        hello, react
        <Child 
          name={name}
          changName={this.changName}
        />
      </div>
    )
  }
}

export default App;

// 子组件Child.js
import React, {Component} from 'react';

class Child extends Component {
  render() {
    const {name, changName} = this.props;
    return (
      <div>
        子组件
        <button onClick={()=>changName('玫瑰')}>点我修改父组件的name</button>
        <p>
          父组件传入的name值为: {name}
        </p>
      </div>
    )
  }
}

export default Child;

跨层级全局通信context

context高级指引 16.3以后引入了新的Context,不要在使用过时的context

当需要全局状态，或者多个不同层级组件需要用到的时候，才考虑用context。但是仍要谨慎，因为使用了context,因为这会使得组件的复用性变差。

context的使用：

1. react提供了方法createContext
2. createContext方法返回的对象里，有Provider和Consumer
3. Provider作为数据提供组件
4. Consumer作为数据展示组件
5. Class.contextType = context; 则在Class组件内任何生命周期都可以访问到this.context，就是要展示的数据。

目录
- context.js
- Provider.js
- Consumer.js

1. 创建context,Provider,Consumer

// context.js
import React, {createContext} from 'react';
const context = createContext({key: 'val'});// 可以在此处设置默认值,也可以不设置，哪里使用哪里设置
const {Provider, Consumer} = context;

2. 使用Provider

// 祖先组件 Ancestor.js 
// Provider有个value属性，接受要传下去的对象
import context, {Provider} from './context.js';
render() {
  return (
    <Provider value={{info: '测试祖先数据'}}>
      <div>各种子组件</div>
    </Provider>
  )
}

3. 使用Consumer
   Consumer组件内接受一个回调函数，参数就是传入的对象。

// 后代子组件 Child.js
// Consumer组件内接受一个回调函数，参数就是传入的对象。
import {Consumer} from './context.js';
class Child extends Component {
  render() {
    return (
      <Consumer>
        {
          (val) => {
            console.log(val); 
            // val就是祖先组件传入的对象 {info: '测试祖先数据'}
            return <div>{val.info}</div>
          }
        }
      </Consumer>
    )
  }
}

4. 使用contextType
   使用Class.contextType。 这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。

// Child.js
import {Consumer}, context from './context.js';

Child.contextType = context;
class Child extends Component {
	// 静态方法 or 类方法
  // static contextType = context;
  render() {
    console.log(this.context)
    return <div>{this.context.info}</div>
  }
}

生命周期

生命周期速查
生命周期有改动，分为16.3及以前，16.4及以后，还要16.7及以后尽量使用hooks开发，hooks没有生命周期

旧的

• 挂载阶段

  • constructor // 构造函数
  • UNSAFE_componentWillMount() // 在挂载之前被调用。它在 render() 之前调用，即将过时
  • render
  • componentDidMount // 挂载完成

• 更新阶段

  • UNSAFE_componentWillReceiveProps(nextProps) // 会在已挂载的组件接收新的 props 之前被调用
  • UNSAFE_componentWillUpdate(nextProps, nextState) // 当组件收到新的 props 或 state 时，会在渲染之前调用。初始渲染不会调用此方法。
  • shouldComponentUpdate(nextProps, nextState) // 会在渲染执行之前被调用。返回值默认为 true。
  • render
  • componentDidUpdate // 更新完成

• 卸载阶段

  • componentWillUnmount // 即将卸载

新的

• 挂载阶段
  • constructor
  • static getDerivedStateFromProps(props, state)
  • render
  • componentDidMount

static getDerivedStateFromProps(props, state) // 在调用 render 方法之前调用，它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。会在每次渲染前触发此方法。此方法无权访问组件实例

• 更新阶段
  • static getDerivedStateFromProps(props, state)
  • shouldComponentUpdate(nextProps, nextState)
  • render
  • getSnapshotBeforeUpdate(prevProps, prevState)
  • componentDidUpdate(prevProps, prevState, snapshot)

getSnapshotBeforeUpdate(prevProps, prevState) // 在最近一次渲染输出（提交到 DOM 节点）之前调用。返回值将作为参数传递给 componentDidUpdate()。

• 卸载阶段
  • componentWillUnmount // 即将卸载

受控组件

指的就是表单组件，eg:input, textarea, select…

this.state = {
  num: 0,
  checked: false
};

<input
  type="textarea"
  value={this.state.num}
  onChange={e => {
    this.setState({ num: e.target.value });
  }}
/>
<input
  type="checkbox"
  checked={this.state.checked}
  onChange={e => {
    console.log(e.target.checked,'e');
    
    this.setState({ checked: e.target.checked });
  }}
/>

处理多个输入

可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。
this.setState({ [name]: value })

改造以上的表单

import React from "react";

class Test extends React.Component {
  state = {
    num: 0,
    checked: false
  }
	render(){
		return (
			<div>
				<input
                  name="num"
				  type="textarea"
				  value={this.state.num}
				  onChange={this.handleChange}
				/>
				<input
          		  name="checked"
				  type="checkbox"
				  checked={this.state.checked}
				  onChange={this.handleChange}
				/>
				<p>{this.state.num}</p>
			</div>
		)
  }
  
  handleChange = ({target}) => {
    const name = target.name;
    const value = name === 'checked' ? target.checked : target.value;
    this.setState({
      [name]: value
    })
  }

}

export default Test;

专栏系列快速链接

1-从零开始学react-认识react&jsx&props&state
2-从零开始学react-深入state，组件通讯，生命周期，受控组件
3-从零开始学react-其他api,初识hook
4-从零开始学react-hooks相关
5-从零开始学react - react-router-dom5
6-从零开始学react - redux相关
7-从零开始学react - 全家桶项目实战