React的Props、生命周期详解

Props 的只读性

“Props” 是 React 中用于传递数据给组件的一种机制，通常作为组件的参数进行传递。在 React 中，props 是只读的，意味着一旦将数据传递给组件的 props，组件就不能直接修改这些 props 的值。所以组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

所以React有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

为什么Props是只读的呢？

当我们在父组件中将数据传递给子组件时，子组件只能使用这些 props 来读取数据，而不能修改它们。这是为了确保数据的单向流动，使得数据的流动更加可控和可预测。当 Props 是只读的时候，我们可以确保数据只能从父组件流向子组件，而子组件不能直接修改父组件传递的数据。这种单向数据流有助于维护组件的可预测性和代码的可维护性。

如果我无法避免要在组件内部修改数据，该怎么办？

如果你需要在组件内部修改数据，你可以使用组件的状态（state）。状态是组件内部的可变数据，可以通过特定的方法来修改。但是这些状态无法直接传递给其他组件，如果需要在多个组件之间共享数据，可以考虑使用上层组件的状态或者全局状态管理工具（如 Redux）

代码示例：

import React, { useState } from 'react';
function ParentComponent() {
  const [count, setCount] = useState(0);
  const incrementCount = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <h2>父组件</h2>
      <p>Count: {count}</p>
      <ChildComponent count={count} increment={incrementCount} />
    </div>
  );
}
function ChildComponent(props) {
  return (
    <div>
      <h2>子组件t</h2>
      <p>总和: {props.count}</p>
      <button onClick={props.increment}>+1</button>
    </div>
  );
}
export default ParentComponent;

如何将函数组件转换成 class 组件 创建一个同名的 ES6 class，并且继承于 React.Component。

• 添加一个空的 render()方法。
• 将函数体移动到 render()方法之中。
• 在 render()方法中使用 this.props替换 props。
• 删除剩余的空函数声明。

函数式组件

function tick(Props) {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {Props.time.toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
  }

class组件

    class Clock extends React.Component {
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

生命周期

挂载

• constructor--------组件实例化时执行，用于初始化state和绑定事件等操作
• getDerivedStateFromProps --------在render方法执行之前调用，用于根据props设置state。
• render--------渲染组件
• componentDidMount（-------组件挂载到DOM后执行，用于执行一些需要DOM的操作，如获取数据。

更新

• getDerivedStateFromProps-------在render方法执行之前调用，用于根据props设置state
• shouldComponentUpdate------判断组件是否需要重新渲染，默认返回true
• render------渲染组件
• getSnapshotBeforeUpdate------在更新前获取DOM信息，如滚动位置等。
• componentDidUpdate--------组件更新后执行，用于执行一些需要DOM的操作，如更新数据

卸载

• componentWillUnmount------组件从DOM中移除时经历的阶段

写一个时钟案例，每秒都会更新时间

    class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }
      componentDidMount() {
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }
      componentWillUnmount() {
        clearInterval(this.timerID);
      }
      tick() {
        this.setState({
          date: new Date()
        });
      }
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Clock />);

让我们来快速概括一下发生了什么和这些方法的调用顺序：

• 当 <Clock /> 被传给 root.render()的时候，React 会调用Clock组件的构造函数。因为 Clock 需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化this.state。我们会在之后更新 state。
• 之后 React 会调用组件的render()方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来匹配 Clock 渲染的输出。
• 当Clock的输出被插入到 DOM 中后，React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中，Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的tick()方法。
• 浏览器每秒都会调用一次tick()方法。 在这方法之中，Clock 组件会通过调用 setState() 来计划进行一次 UI 更新。得益于 setState()的调用，React 能够知道 state已经改变了，然后会重新调用 render()方法来确定页面上该显示什么。这一次，render()方法中的 this.state.date 就不一样了，如此一来就会渲染输出更新过的时间。
• React 也会相应的更新 DOM。一旦 Clock 组件从 DOM 中被移除，React 就会调用componentWillUnmount()生命周期方法，这样计时器就停止了。

到此这篇关于React的Props、生命周期的文章就介绍到这了,更多相关React的Props、生命周期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

React
Props
生命周期

相关文章

• 

  react-router v6实现动态路由实例

  这篇文章主要为大家介绍了react-router v6实现动态路由实例详解，<BR>有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  2022-08-08
• 

  React 实现表单组件的示例代码

  本文主要介绍了React 实现表单组件的示例代码,支持包括输入状态管理,表单验证,错误信息展示,表单提交,动态表单元素等功能,具有一定的参考价值,感兴趣的可以了解一下

  2024-07-07
• 

  React 模块联邦多模块项目实战详解

  这篇文章主要介绍了React 模块联邦多模块项目实战详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  2022-10-10
• 

  详解超简单的react服务器渲染(ssr)入坑指南

  这篇文章主要介绍了详解超简单的react服务器渲染(ssr)入坑指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  2019-02-02
• 

  详解React Native中如何使用自定义的引用路径

  这篇文章主要为大家介绍了React Native中如何使用自定义的引用路径详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  2022-10-10
• 

  react 路由权限动态菜单方案配置react-router-auth-plus

  这篇文章主要为大家介绍了react路由权限动态菜单方案react-router-auth-plus傻瓜式配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  2022-08-08
• 

  详解如何在Remix 中使用 tailwindcss

  这篇文章主要为大家介绍了如何在Remix中使用tailwindcss方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  2023-05-05
• 

  React diff算法超详细讲解

  渲染真实DOM的开销很大，有时候我们修改了某个数据，直接渲染到真实dom上会引起整个dom树的重绘和重排。我们希望只更新我们修改的那一小块dom，而不是整个dom，diff算法就帮我们实现了这点。diff算法的本质就是：找出两个对象之间的差异，目的是尽可能做到节点复用

  2022-11-11
• 

  React中使用async validator进行表单验证的实例代码

  react上进行表单验证是很繁琐的，在这里使用async-validator处理起来就变的很方便了，接下来通过本文给大家介绍React中使用async validator进行表单验证的方法,需要的朋友可以参考下

  2018-08-08
• 

  react-router-dom v6 使用详细示例

  这篇文章主要介绍了react-router-dom v6使用详细示例，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助

  2022-09-09

最新评论