react讲解（组件，生命周期以及受控组件）

Posted 2023-02-14 stay_少年与梦

文章目录

• 前言
• 一、组件的通信原理
• • state 和 setState
• 二、组件分类
• • 1.类组件
  • 2.组件中父子组件的通信
  • • 代码示例
    • A组件代码
    • • B组件代码：
  • 2. 跨组件通信
  • • • A组件代码如下：
    • C组件代码如下:
• 三.组件的生命周期
• • • • 生命周期演变
    • 现在
    • • • 挂载阶段
        • • **更新阶段**
    • 详解
• 四.受控组件与非受控组件
• • • 受控组件代码示例：
    • 非受控组件代码示例：
• 总结

---

前言

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