setState

最新推荐文章于 2025-06-22 21:00:31 发布

原创最新推荐文章于 2025-06-22 21:00:31 发布 · 171 阅读

CC 4.0 BY-SA版权

setState(updater, [callback])

参数1： updater: 更新数据（函数/对象）
参数2callback: 更新成功后的回调 FUNCTION

  changeName=()=>{
        this.setState({
          name: "大王"
        });
  }

异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能
浅合并 Object.assign()

组件间通信

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

父级向子级通信把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据

父组件向子组件传参

render(){
    return (<div><Child 
                  name = {this.state.name}  //把数据添加子组件的属性中
                  changeName = {this.changeName}
                  >
                </Child></div>)
  }

//接收父组件的传参   
      let {name,changeName} = this.props

子级向父级通信在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级，在子级中调用该方法父级传递消息

跨组件通信 context

React.createContext(defaultValue);{ Consumer, Provider } =
createContext(defaultValue)

Context.Provider 在父组件调用 Provider 传递数据
value 要传递的数据
接收数据

class.contextType = Context;
static contextType = Context;
this.context;
Context.Consumer <Consumer> {(props)=>{ console.log(props); return <div></div>
}} </Consumer>

注意在使用不熟练时，最好不要再项目中使用 context，context一般给第三方库使用

组件的生命周期

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

在这里插入图片描述

生命周期函数详解

挂载阶段

constructor(props)
类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作

1.初始化 state
2.处理事件绑定函数的 this

类式组件中定义constructor，一定要接收props，调用super()进行继承

// constructor：构造函数
    constructor(props){
        super(props);
        this.state = {
            age:16,
            name: "王"
        }
        console.log("构造函数");
     }

static getDerivedStateFromProps(props, state)
- props：父组件传递过来的参数
- state：自身组件的参数
该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state

static getDerivedStateFromProps(props, state){
        console.log("即将要挂载",props, state);
        return state;
      }

render()
render 方法是 Class 组件必须实现的方法
componentDidMount()

在组件挂载后（render 的内容插入 DOM 树中）调用。通常在这个阶段，我们可以：
- 操作 DOM 节点
- 发送请求

 //组件挂载完成
      componentDidMount(){
        console.log("组件挂载完成");
      }

更新阶段

父组件更新引起组件更新

static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState)

发生在更新阶段，getDerivedStateFromProps 之后，render 之前，该函数会返回一个布尔值，决定了后续是否执行 render，首次渲染不会调用该函数

 // 组件的state或者props 改变
    shouldComponentUpdate(nextProps, nextState){
        console.log(1);
        // 注意这个返回值决定是否重新渲染DOM，true 重新渲染DOM 生命周期会继续向下走，
        // false不渲染DOM，更新结束
        return true; 
    }

componentWillUpdate()

 // 即将更新组件
    componentWillUpdate(nextProps, nextState){
        console.log("即将更新组件");
    }

getSnapshotBeforeUpdate(prevProps, prevState)

该方法在 render() 之后，但是在输出到 DOM 之前执行，用来获取渲染之前的快照。当我们想在当前一次更新前获取上次的 DOM 状态，可以在这里进行处理，该函数的返回值将作参数传递给下个生命周期函数
componentDidUpdate

该函数并不常用。
componentDidUpdate()

该函数会在 DOM 更新后立即调用，首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作

 // 完成渲染即将被挂载在DOM中, 这会已经生成了新的DOM节点了，    
    getSnapshotBeforeUpdate(prevProps, prevState){ 
        console.log("完成渲染即将被挂载在DOM中");
        return 11;// 不过还有修改文档，你可以在这里去获取更新之前的文档
    }

组件自身更新

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

卸载阶段

componentWillUnmount()

该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等

componentWillUnmount(){
    console.log("组件即将卸载");
}

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

static getDerivedStateFromError()
componentDidCatch()