React生命周期,受控组件和非受控组件

state和setState

state:里面存放的是数据;

setState(updater,callback) :用来修改state里面的值

​ updater:更新数据是一个function/object

​ callback:更新成功后的回调函数(很少用)

​ 异步:react 通常会集齐一批需要更新的组件,然后一次性更新来保证渲染的性能

​ 浅合并 Object.assing()

组件通信

​ 在react中,是单向数据流,因此父组件可以把state通过props传递给子组件,但是子组件不能修改值,如果 子组件想要修改父组件的数据,必须通过回调函数来完成;

​ 父传子: 把数据添加到子组件,然后子组件从props属性中,获取父组件传来的数 据;

​ 子传父:在父组件中定义相关数据的操作方法,把该方法传递给子组件,在子组件中传递信息

跨组件通信 context - 扩展

​ React 里的两个方法:

​ Provider :存数据

​ Consumer: 取数据

通俗的讲:多个组件通信(A,B,C组件,A想和C通信)

创建一个context.js

import React,{ createContext} from 'react';   //引入react里的方法

let context= createContext();   //定义一个变量
let {Consumer,Provider}=context;  //找到变量里的方法
export default context         //暴露出来
export {Consumer,Provider}      //暴露出来

​ 从react库引入所需要的方法

A组价

import React,{Component} from 'react';
import {Provider} from "./context";    //引入方法
class App extends Component {
  // let state={
  //   info:"nihao"
  // }
  render(){
    return (
    
    <Provider value={
      {info:'你好 '}
    }>
       <div>
  
          <FriendList />

       </div>
    </Provider>)
   
  }
}

Provide 是一个标签,包在最外层标签上,用来存内容

C组件

import  {Consumer} from './context';   //引入接收数据的方法
export default class Dl extends Component{
		render(){
			return (
			 <p>
                <Consumer>{(value)=>{console.log(value)}}					</Consumer>
            </p>
			
			)
		}
}

Consumer,也是一个标签,用来取出数据,输出的结果是一个对象;

生命周期

​ 生命周期就是指某个事物从开始到结束的各个阶段;也就是组件从创建到销毁的过程;

他主要分为三个阶段:

挂载阶段:

• constructor() :组件初始化函数

  ​ 作用:初始化state 处理事件绑定函数的this

• componentWillMount() 组件挂载前

• render() : 他是类组件必须实现的方法

• componentDidMount() :在组件挂载后(render的内容插在DOM树中) 调用,在这个过程中,我们可以操作DOM节点,发送请求

  更新阶段:

​ 父组件更新引起组件更新

 componentWillReceiveProps(nextProps)

1.在接受父组件改变后的props需要重新渲染组件时用到的比较多

2.接受一个参数nextProps

3.通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

• shouldComponentUpdate(nextProps, nextState)

  1.主要用于性能优化(部分更新)

  2.唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新

  3.因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

• componentWillUpdate(nextProps, nextState)

  shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。

• render

  ​ render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

• componentDidUpdate(prevProps, prevState)

  ​ 组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

  组件自身更新:

• shouldComponentUpdate(): 发生在更新阶段 该函数返回一个布尔值,决定后续是否执行loader

• componentWillUpdate() :在函数会在DOM更新后立即调用

• render()

• getSnapshotBeforeUpdate()

• componentDidUpdate()

卸载阶段:

​ componentWillUnmount () :组件的卸载和数据额销毁

错误处理:

​ 当渲染过程,生命周期,或者子组件的构造函数中抛出错误,会调用以下方法

​ static getDerivedStateFromError()

​ componentDidCatch(error, info)

详细参考：http://projects.wojtekmaj.pl/react-lifecycle-methodsdiagram/

受控组件与非受控组件

​ 受控组件:1. 类似于vue中的双向数据流.2.数据和视图之间可以相互影响,数据发生变化视图也跟着变

​ 非受控组件: 1.类似与单向数据流,2.只可以数据改变视图

受控组件:

import React,{Component} from 'react';
class App extends Component {
  state={
    info:'这是value值'
  }
  render(){
    let {info}=this.state;
    return (
   
        <div>
            <input 
            type='text' 
             value={info}
            onChange ={({target})=>{
              this.setState({
                info:target.value
              })
            }}
            />
          <button onClick={()=>{
            console.log(info)
          }}>点一点</button>
        </div>
      )
   
  }
}


export default App;

当input里的数据发生变化,控制台的state数据跟着变化

非受控组件:

import React,{Component} from 'react';
class App extends Component {
  state={
    info:'这是value值'
  }
  render(){
    let {info}=this.state;
    return (
   
        <div>
           <input type='text'  defaultValue={info}/>
          <input type='text'  defaultValue={info}/>
          <input type='text'  defaultValue={info}/>
          <button onClick={()=>{
            console.log(info)
          }}>点一点</button> 
        </div>
      )
   
  }
}


export default App;

defaultValue:非受控组件,input框里的值发生变化,state的值不会发生变化;
总结:
学了react的state和setTate,以及生命周期,和受控组件以及非受控组件,这是我自己学习的,想要了解更详细的请去官网查看;