开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react讲解（组件，生命周期以及受控组件） -> 正文阅读

[JavaScript知识库]react讲解（组件，生命周期以及受控组件）

前言

今天我们一起来学习react 中的组件，以及它们组件与组件间的通信方式。

一、组件的通信原理

在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

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

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

state 和 setState

state 中存放的是数据
setState(updater, [callback])用来修改state里面的值
updater: 更新数据 function/object
callback: 更新成功后的回调函数
异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能
浅合并 Objecr.assign()

二、组件分类

1.类组件

1.组件类必须继承 React.Component
2.组件类必须有render 方法
3.render 方法的return 后定义组件的内容

代码示例

class App extends Component {


  state= {
    nub:20,name: "折耳猫",sex:"kaiaia"
  }

  // state ={nub:nub+1 }

  // 类式组件中，定义constructor ,一定需要接受props，调用super
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     nub:0
  //   }
  // }
  setAge= ()=>{
    this.setState({
      nub:this.state.nub+1
    })
  }



  setName=()=>{
    this.setState({name:"可爱"})
  }
  render(){
    let {nub} = this.state;
    return (<div>
              {}
              <p>{this.state.name}</p>
              <p>{this.state.nub}</p>
              <button onClick={()=>{
                this.setAge()
                this.setName()
              }}>长一岁</button>
          </div>)
  }
}
 

export default App;

记得导出

2.组件中父子组件的通信

代码示例

App.js

import React,{Component} from "react";

import FriendList from "./FriendList"

class App extends Component {



  state ={
     name: '张三',
     hobby: '哈哈'
  }

  changValue = (newName)=>{
    this.setState({name:newName})
  }
  render(){
    let {hobby} =this.state
    return (<div>

              <p>{this.state.name}</p>
              <FriendList
              
              hobby = {hobby}
              changValue={this.changValue}
              />
          </div>)
  }
}
 

export default App;

A组件代码

import React,{Component} from "react";
import './FriendList.css';
import data from './data';
import Dl from './dL'
export default class Friendlist extends Component {


    state ={
        isOpen:"" //哪一项是展开的
    }
    // 传递给子组件，点击哪个子组件，子组件就将自身的name传参过来
    changeOpen =(name)=>{
        this.setState({isOpen:name})
    }
    render(){
        let {isOpen} = this.state;
        let {changValue} = this.props;
        return (
            <div>
            <button onClick={
                ()=>{changValue('牛肉')}
                }>dianwo</button>
            
            <div className="friend-list">
              {
                Object.keys(data).map(item=>{
                    return (
                    
                    <Dl
                        name = {item}
                        value ={data[item]}
                        isOpen ={isOpen}
                        changeOpen = {this.changeOpen}
                    />
                    )
                })
              }
            </div></div>
        )
    }
}

B组件代码：

import React,{Component} from "react";

export default class Dl extends Component {


    state ={
            isOpen:true
        }
    render() {
        let {title,list} = this.props.value;
        // name 每一组的属性名
        // isOpen 哪一项需要展开
        let {name,isOpen,changeOpen} = this.props;
        // let {isOpen} = this.state;   
        return(
            <div className={"friend-group" +(name==isOpen ? "expanded":"")}>
                <dt onClick={
                    ()=>{
                        // this.setState({isOpen:!isOpen})
                        changeOpen(name);
                    }
                    
                    
                }>{title}</dt>
                {
                    list.map((item,index)=>{
                        return <dd key={index}>{item.name}</dd>
                    })
                }
            </div>
        )
    }
}

2. 跨组件通信

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}      //暴露

A组件代码如下：

import React, { Component } from "react";

import FriendList from "./FriendList"

import { Provider } from "./context";
class App extends Component {





  // state ={
  //   info:"哈哈"
  // }

  render() {
   
    return (
      <Provider value={{
        info:"猥琐发育"
      }}>
        <div>


          <FriendList

          />
        </div>
      </Provider>)
  }
}


export default App;

C组件代码如下:

import React,{Component} from "react";
import { Consumer } from "./context";
export default class Dl extends Component {


   
    render() {
        let {title,list} = this.props.value;
        // name 每一组的属性名
        // isOpen 哪一项需要展开
        let {name,isOpen,changeOpen} = this.props;
        // let {isOpen} = this.state;   
        return(
            <div className={"friend-group" +(name==isOpen ? "expanded":"")}>
                <dt onClick={
                    ()=>{
                        // this.setState({isOpen:!isOpen})
                        changeOpen(name);
                    }
                    
                    
                }>{title}</dt>
                <p>
                    <Consumer>{value=>value.info}</Consumer>
                </p>

                {
                    list.map((item,index)=>{
                        return <dd key={index}>{item.name}</dd>
                    })
                }
            </div>
        )
    }
}

二.组件的生命周期

所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数.

生命周期演变

之前（React 16.3 之前）
挂载阶段

constructor
componentWillMount
render
componentDidMount

更新阶段
父组件更新引起组件更新

componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps,nextState)
componentWillUpdate(nextProps, nextState)
render
componentDidUpdate(prevProps, prevState)

组件自身更新

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

卸载阶段
componentWillUnmount

现在

挂载阶段

constructor
static getDerivedStateFromProps(props, state)
render
componentDidMount

更新阶段

父组件更新引起组件更新

static getDerivedStateFromProps(props, state)
shouldComponentUpdate()
componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

组件自身更新

shouldComponentUpdate()
componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载阶段
componentWillUnmount
错误处理

static getDerivedStateFromError()
componentDidCatch(error, info)

详解

constructor(props)
类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作
初始化 state
处理事件绑定函数的 this
render()
render 方法是 Class 组件必须实现的方法
static getDerivedStateFromProps(props, state)

该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state
componentDidMount()
在组件挂载后（render 的内容插入 DOM 树中）调用。通常在这个阶段，我们可以：

1.操作 DOM 节点
2.发送请求

shouldComponentUpdate(nextProps, nextState)
发生在更新阶段，getDerivedStateFromProps 之后，render 之前，该函数会返回一个布尔值，决定了后续是否执行 render，首次渲染不会调用该函数
getSnapshotBeforeUpdate(prevProps, prevState)
该方法在 render() 之后，但是在输出到 DOM 之前执行，用来获取渲染之前的快照。当我们想在当前一次更新前获取上次的 DOM 状态，可以在这里进行处理，该函数的返回值将作为参数传递给下个生命周期函数componentDidUpdate。
注意：该函数并不常用。
componentDidUpdate()
该函数会在 DOM 更新后立即调用，首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作
componentWillUnmount()
该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等。

错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法

static getDerivedStateFromError()
componentDidCatch()

受控组件与非受控组件

受控组件：类似于vue的双向数据绑定
数据和视图之间可以相互影响

非受控组件：类似于单向数据流只可以数据改变视图

受控组件代码示例：

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;

非受控组件代码示例：

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 中的生命周期，以及什么是受控组件和非受控组件。
受控组件类似于vue的双向数据绑定，数据和视图之间可以相互影响
而非受控组件：类似于单向数据流只可以数据改变视图。
今天我们就学习到这里