react数据管理之setState与Props

本文涉及的产品
数据管理 DMS,安全协同 3个实例 3个月
推荐场景:
学生管理系统数据库
简介: react数据管理之setState与Props

setState调用原理

setState 是 React 中用于更新组件状态(state)的方法。它的调用原理可以分为以下几个步骤:

  1. 状态的改变:当调用 setState 时,React 会将新的状态对象与当前状态对象进行合并(合并过程是浅合并)。React 不会直接修改当前状态对象,而是创建一个新的状态对象,以确保不直接修改状态,从而遵循 React 的不可变性原则。
  2. 触发重新渲染:一旦状态更新完成,React 会调用组件的 render 方法来重新渲染组件。在重新渲染过程中,React 会生成一个新的虚拟 DOM 树(Virtual DOM)。
  3. 虚拟 DOM 比较:React 会将新生成的虚拟 DOM 树与之前的虚拟 DOM 树进行比较,找出两者之间的差异(所谓的变更集合)。
  4. 局部更新:React 将变更集合中的差异应用到实际的 DOM 中,以更新用户界面。这是一个高效的过程,因为 React 仅更新了需要更新的部分,而不是重新渲染整个页面。
  5. 生命周期方法调用:在更新完成后,React 会调用适当的生命周期方法,如 componentDidUpdate,以便开发者可以执行一些操作,例如获取最新的 DOM 元素引用或执行副作用操作。

需要注意的是,由于 setState 是异步的,React 可能会将多次的 setState 调用合并成一次更新,以提高性能。这意味着在一个函数内多次调用 setState 可能不会导致多次重新渲染,而是在函数执行结束后一次性更新状态和重新渲染。

例如,以下代码中的多次 setState 调用会被合并成一次更新:


this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

这个特性有时会导致不直观的行为,因此可以使用函数式的 setState 形式来确保状态更新是基于先前的状态的,而不受合并的影响:


this.setState((prevState) => ({ count: prevState.count + 1 }));

setState第二个参数

this.setState(newState, callback);

  • newState 是一个对象或函数,用于描述要更新的状态。这可以是一个新的状态值或一个函数,该函数接受前一个状态作为参数,返回新的状态。
  • callback 是一个可选的回调函数,它会在状态更新完成后被调用。

例如:

import React, { Component } from 'react';
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 }, () => {
      // 回调函数,会在状态更新后被调用
      console.log('Count updated:', this.state.count);
    });
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

在上述示例中,当点击按钮并调用 handleIncrement 方法时,this.setState 用于增加 count 的值。回调函数通过 console.log 输出更新后的 count 值,这是在状态更新后被调用的。

回调函数的主要用途包括:

  • 执行需要在状态更新后立即执行的代码。
  • 执行副作用操作,如发起网络请求或操作 DOM。
  • 在状态更新后通知其他组件或触发其他操作。

props和state区别

props(属性)和 state(状态)是 React 中用于管理组件数据的两个不同概念,它们有以下主要区别:

  1. 来源
  • props:是由父组件传递给子组件的数据。父组件通过属性(props)将数据传递给子组件,子组件不可以直接修改这些数据,它们是只读的。
  • state:是组件内部维护的数据,用于描述组件的特定状态。组件可以自己管理和修改自己的状态。
  1. 可变性
  • props:是不可变的(immutable),子组件不能直接修改从父组件接收的 props。Props 用于从外部传递信息给组件,组件应该将 props 视为只读数据。
  • state:是可变的(mutable),组件可以通过调用 setState 方法来更新自己的状态。
  1. 管理
  • props:由父组件管理和传递,子组件只能访问和使用 props。
  • state:由组件自己管理和维护,组件可以在需要时修改自己的状态。
  1. 作用
  • props:用于传递数据给子组件,以控制子组件的行为和显示。
  • state:用于管理组件内部的状态,以响应用户交互、数据请求、或其他事件。
  1. 传递
  • props:通过组件的属性(props)传递给子组件。父组件可以通过属性来控制子组件的行为。
  • state:在组件内部声明和管理,可以通过 setState 方法来更新。
  1. 默认值
  • props:可以为 props 设置默认值,以防止未传递某个属性时出现错误。
  • state:可以在组件的构造函数中设置初始状态(state)的默认值。
  1. 更新
  • props:当父组件的 props 发生变化时,会触发子组件的重新渲染,子组件会接收新的 props。
  • state:当组件的状态(state)发生变化时,会触发组件的重新渲染,从而更新界面。

props改变后如何更新组件

class组件

  1. 父组件传递新的 props:父组件可以通过修改传递给子组件的 props 数据来引发子组件的更新。这可以通过在父组件中修改 props 值或通过父组件的状态变化来实现。
  2. 子组件的 componentWillReceiveProps(已废弃,不推荐使用)、getDerivedStateFromPropscomponentDidUpdate 方法:当子组件接收到新的 props 后,React 将触发这些生命周期方法之一,具体取决于 React 版本和组件实现。
  • 在 React 16.3 及更早版本中,可以使用 componentWillReceiveProps 生命周期方法来处理新的 props
  • 在 React 16.3 及以后的版本中,推荐使用 getDerivedStateFromProps 静态方法或 componentDidUpdate 来处理新的 props
  1. 在生命周期方法中更新组件状态或执行其他操作:在上述生命周期方法中,可以访问新的 props 和组件当前的状态(this.propsthis.state)以及之前的 propsstate。可以根据新的 props 数据来更新组件的状态,从而触发重新渲染。

例如,使用 getDerivedStateFromProps来处理新的 props:

class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // 检查新的 props,并根据需要更新状态
    if (nextProps.someProp !== prevState.someProp) {
      return {
        someState: nextProps.someProp,
      };
    }
    return null; // 不更新状态
  }
  render() {
    // 渲染组件
    return <div>{this.state.someState}</div>;
  }
}

或者componentDidUpdate:

import React, { Component } from 'react';
class MyComponent extends Component {
  state = {
    count: 0,
  };
  componentDidUpdate(prevProps, prevState) {
    if (this.props.someProp !== prevProps.someProp) {
      console.log('Props changed:', prevProps.someProp, '->', this.props.someProp);
    }
  }
  render() {
    return <div>{this.props.someProp}</div>;
  }
}
export default MyComponent;

React 16.3 及以后的版本,componentWillReceiveProps 生命周期方法已经被标记为已废弃,不再推荐使用。相反,推荐使用 getDerivedStateFromPropscomponentDidUpdate 来处理 props 的变化。

函数组件

在函数组件中,可以使用 React 的钩子函数来判断组件何时更新,特别是 useEffect 钩子。下面是如何在函数组件中判断组件何时更新:

  1. 使用 useEffect 钩子:使用useEffect 钩子可以函数组件中执行副作用操作,并且可以根据依赖项来判断何时触发这些副作用。可以将 props 或其他状态值作为依赖项,当这些依赖项发生变化时,useEffect 中的代码将被执行。
import React, { useEffect } from 'react';
function MyComponent(props) {
  // 使用 useEffect 钩子来判断何时更新
  useEffect(() => {
    // 这里的代码在组件每次渲染后都会执行
    // 可以在这里根据新的 props 进行操作
    console.log('Props updated:', props.someProp);
  }, [props.someProp]); // 仅在 props.someProp 发生变化时执行
  return <div>{props.someProp}</div>;
}

在上面的示例中,我们将 props.someProp 作为 useEffect 的依赖项,因此当 props.someProp 发生变化时,useEffect 中的代码将被执行,从而可以判断组件何时更新。

  1. 使用 React.memo(可选):如果希望函数组件在特定 props 变化时才进行更新,并且不关心其他的 props,可以使用 React.memo 来包装函数组件。这将创建一个经过优化的组件,只有在指定的 props 发生变化时才会触发重新渲染。
import React from 'react';
function MyComponent(props) {
  return <div>{props.someProp}</div>;
}
// 使用 React.memo 包装组件,只有 someProp 变化时才重新渲染
export default React.memo(MyComponent);
相关实践学习
MySQL基础-学生管理系统数据库设计
本场景介绍如何使用DMS工具连接RDS,并使用DMS图形化工具创建数据库表。
目录
相关文章
|
12天前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
1月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为
|
1月前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
2月前
|
前端开发 JavaScript 安全
【亮剑】探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式。文章分为三部分:首先解释了样式传递的必要性,包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践,展示了一个使用内联样式自定义按钮颜色的例子。最后,讨论了使用CSS模块和TypeScript接口处理复杂样式的方案,强调了它们在组织和重用样式方面的优势。结合TypeScript,确保了样式的正确性和可维护性,为开发者提供了灵活的样式管理策略。
|
2月前
|
前端开发 JavaScript
【掰开揉碎】react中的super(props)
【掰开揉碎】react中的super(props)
|
2月前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
49 1
|
2月前
|
前端开发 JavaScript
详解React:Props构建可复用UI的基石
详解React:Props构建可复用UI的基石
20 0
|
2月前
|
前端开发
React中render Props模式
React中render Props模式
React中render Props模式
|
2月前
|
前端开发
react父组件props变化的时候子组件怎么监听?
react父组件props变化的时候子组件怎么监听?
117 0
|
2月前
|
前端开发
说说React中setState和replaceState的区别?
在 React 中,setState()和 replaceState()是用于更新组件状态的两个方法。它们之间有一些区别
29 0

热门文章

最新文章