React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Props 生命周期

React的Props、生命周期详解

作者:zayyo

“Props” 是 React 中用于传递数据给组件的一种机制,通常作为组件的参数进行传递,在 React 中,props 是只读的,意味着一旦将数据传递给组件的 props,组件就不能直接修改这些 props 的值,这篇文章主要介绍了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

函数式组件

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>
        );
      }
    }

生命周期

挂载

更新

卸载

image.png

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

    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 />);

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

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

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