极品-------React的组件通信,生命周期,受控组件,与非受控组件

Posted 2021-08-28 哈比老乌龟

React中的主要的组件通信有
一.父传子
二.子传父
三.兄弟相传

一.父传子

父组件传递数据给子组件
1.父组件中引入子组件

import Family from "./family";

2.在父组件中使用子组件

  <Family/>

3.父组件提供要传递的state数据

  state = {
    Lastname:"火娃",
  }

4.给子组件标签添加属性.值为state中的数据

  <Family name={this.state.Lastname}/>

5.子组件中通过props接受父组件中传递的数据

 <li>{this.props.name}</li>

父组件

class App extends Component{
  state = {
    hEight:174,
    tex:'',
    Lastname:"火娃",
    shu:0
  }
  render(){
    return (<div>
        <Family name={this.state.Lastname}/>
    </div>)
  }
}

子组件

class Family extends React.Component{
    render(){
      return  (<div>
            <ul>  
                <li>{this.props.name}</li>
            </ul>
        </div>)
    }
};
ReactDOM.render(<Family/>,
document.querySelector('#root'))
export default Family

二.子传父

子传父,父组件提供一个方法,把方法传给子组件,子组件调用传参,这是回调函数
1.提供方法

 Child = props =>{
    return(
      <div>
        <p>{props.name}</p>
      </div>
    )
  }

2.传给子组件

  <Family  getMsg={this.Child} }/> 

3.子组件调用

 dianclick=()=>{
        this.props.getMsg(this.state.msg)
    }

4.传入子组件的数据

  state={
        msg:'水娃'
    }
    dianclick=()=>{
        this.props.getMsg(this.state.msg)
    }

父组件

class App extends Component{
  state = {
    hEight:174,
    tex:'',
    Lastname:"火娃",
    shu:0
  }
  getChild=(data)=>{
    console.log(data)
  }
  Child = props =>{
    return(
      <div>
        <p>{props.name}</p>
      </div>
    )
  }
  render(){
    // let {hEight} = this.state
    return (<div>
        <Family  getMsg={this.Child} }/> 
  }
};

子组件

class Family extends React.Component{
    state={
        msg:'水娃'
    }
    dianclick=()=>{
        this.props.getMsg(this.state.msg)
    }
    render(){
      return  (<div>
            <ul>
                <li>{this.props.name}</li>
                <li>{this.props.shu}</li>
            </ul>
        </div>)
    }
};
ReactDOM.render(<Family/>,
document.querySelector('#root'))
export default Family

三.兄弟组件传参

React组件通信中兄弟传参需要媒介,他们共同的父组件该变父组件中的而改变子组件的
1.在父组件中定义方法

  onIncrement = ()=>{
    this.setState({
      shu:this.state.shu+1
    })
  }

2.在父组件中定义属性

 state = {
    shu:0
  }

3.传给子组件

 <Family  shu={this.state.shu}/>
 <Parent onIncrement={this.onIncrement}/>

4.子组件中使用

第一个子组件
  <li>{this.props.shu}</li>
第二个子组件 
 <button onClick={()=>this.props.onIncrement()}>+1</button>

父组件

class App extends Component{
  state = {
    shu:0
  }
  getChild=(data)=>{
    console.log(data)
  }
  onIncrement = ()=>{
    this.setState({
      shu:this.state.shu+1
    })
  }
  render(){
    // let {hEight} = this.state
    return (<div>
        <Family  shu={this.state.shu}/>
        <Parent onIncrement={this.onIncrement}/>
    </div>)
  }
};

第一个子组件

import React from "react";
import ReactDOM from "react-dom";

class Family extends React.Component{
    state={
        msg:'水娃'
    }
    // Child = props=>{
    //     return (
    //         <div>
    //             <p>{props.Lastname}</p>
    //         </div>
    //     )
    // }
    dianclick=()=>{
        this.props.getMsg(this.state.msg)
    }
    render(){
      return  (<div>
           {/* <button onClick={this.Child()}>父传子</button> */}
            <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>{this.props.name}</li>
                <li>{this.props.shu}</li>
            </ul>
            <button onClick={this.dianclick}>点击葫芦娃</button>
        </div>)
    }
};
ReactDOM.render(<Family/>,
document.querySelector('#root'))
export default Family

第二个子组件

import React from "react"
import Boy from "./boy"
class Parent extends React.Component{
    render(){
        return(
            <div>
                <Boy />
                <p>我是二组件</p>
                <button onClick={()=>this.props.onIncrement()}>+1</button>
            </div>
        )
    }
}
export default Parent

四跨组件传参

const {Provider,Consumer} = React.createContext()
class App extends Component{
  render(){
    return (<div> 
    	//创建
        <Provider value="孙子嘿嘿">
        <Parent onIncrement={this.onIncrement}/>
        </Provider>
    </div>)
  }
};
//消耗
 <Consumer>
         {data => <p>我是孙子{data}</p>}
 </Consumer>

五.受控组件与非受控组件

解释:
在 html 中，表单元素（如input、 textarea 和 select）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
见解:
每当输入框的输入内容发生变化时，都会被写入到组件的state中，这种组件在React中被理解为受控组件。
受控组件的值，始终是由React的state驱动的。
这种组件的数据是由React组件进行管理的，所以在大多数情况下，官方推荐使用受控组件。

受控组件

import React, { Component, Fragment } from 'react'
export default class Demohooks extends Component {
  constructor(props) {
    super(props);
    this.state = {
      controllValue: 0,
    }
  }
  onChangeInput = (e) => {
    this.setState({
      controllValue: e.target.value
    })
  }
  render() {
    return (
      <Fragment>
        <h1>受控组件</h1>
        <div>{this.state.controllValue}</div>
        用户名：<input value={null} onChange={this.onChangeInput} />
      </Fragment>
    )
  }
}

非受控组件
官网:
要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref来从 DOM 节点中获取表单数据。
因为非受控组件将真实数据储存在 DOM 节点中，所以在使用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量。否则，你应该使用受控组件。

总的来说就是操作DOM节点,所以官方推荐受控组件
非受控组件

import React, { Component } from 'react'

export default class Demohooks extends Component {
  onSubmit = (event) => {
    event.preventDefault();
    const { inputName, password } = this;
    console.log(inputName.value)
    console.log(password.value)
  }
  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          用户名：<input ref={c => this.inputName = c} /> <br />
          密码：<input ref={c => this.password = c} /> <br />
          <button>登录</button>
        </form>
      </div>
    )
  }
}

React生命周期

生命周期的方法有：
constructor()
constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。

componentWillMount()
componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。

componentDidMount()
组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

componentWillUnmount ()
在此处完成组件的卸载和数据的销毁。

componentWillReceiveProps (nextProps)
在接受父组件改变后的props需要重新渲染组件时用到的比较多
接受一个参数nextProps
通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

shouldComponentUpdate(nextProps,nextState)
主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断
componentWillUpdate (nextProps,nextState)
shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。

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

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

getDerivedStateFromProps(nextProps, prevState)
代替componentWillReceiveProps()。
老版本中的componentWillReceiveProps()方法判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数
getSnapshotBeforeUpdate(prevProps, prevState)
代替componentWillUpdate。
常见的 componentWillUpdate 的用例是在组件更新前，读取当前某个 DOM 元素的状态，并在 componentDidUpdate 中进行相应的处理。
这两者的区别在于：

在 React 开启异步渲染模式后，在 render 阶段读取到的 DOM 元素状态并不总是和 commit 阶段相同，这就导致在
componentDidUpdate 中使用 componentWillUpdate 中读取到的 DOM 元素状态是不安全的，因为这时的值很有可能已经失效了。
getSnapshotBeforeUpdate 会在最终的 render 之前被调用，也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是可以保证与 componentDidUpdate 中一致的。
此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。