React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react setState与Props

react数据管理中的setState与Props详解

作者：demo123567

setState 是 React 中用于更新组件状态（state）的方法,本文给大家介绍react数据管理中的setState与Props知识,感兴趣的朋友跟随小编一起看看吧

setState调用原理

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

需要注意的是，由于 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);

例如：

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 值，这是在状态更新后被调用的。

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

props和state区别

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

来源：

可变性：

管理：

作用：

传递：

默认值：

更新：

props改变后如何更新组件

class组件

在 React 16.3 及更早版本中，可以使用 componentWillReceiveProps 生命周期方法来处理新的 props。

在 React 16.3 及以后的版本中，推荐使用 getDerivedStateFromProps 静态方法或 componentDidUpdate 来处理新的 props。

在生命周期方法中更新组件状态或执行其他操作：在上述生命周期方法中，可以访问新的 props 和组件当前的状态（this.props 和 this.state）以及之前的 props 和 state。可以根据新的 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 生命周期方法已经被标记为已废弃，不再推荐使用。相反，推荐使用 getDerivedStateFromProps 或 componentDidUpdate 来处理 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 中的代码将被执行，从而可以判断组件何时更新。

2.使用 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);

到此这篇关于react数据管理之setState与Props的文章就介绍到这了,更多相关react setState与Props内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文