react讲解(组件,生命周期以及受控组件)

Posted stay_少年与梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的双向数据绑定,数据和视图之间可以相互影响
而非受控组件:类似于单向数据流 只可以数据改变视图。
今天我们就学习到这里

以上是关于react讲解(组件,生命周期以及受控组件)的主要内容,如果未能解决你的问题,请参考以下文章

react讲解(组件,生命周期以及受控组件)

react讲解(组件,生命周期以及受控组件)

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

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

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

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