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

Posted 2022-02-02 哈比老乌龟

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（）。