我在看Pluralsight关于React的课程,老师说道具不应该被改变。我现在正在读一篇关于道具vs.国家的文章(uberVU/react-guide),它说

道具和状态更改都会触发呈现更新。

文章后面说:

Props(属性的缩写)是组件的配置,如果可以的话,是它的选项。它们是从上面接收的,是不可变的。

所以道具可以改变,但它们应该是不可变的? 什么时候应该使用道具,什么时候应该使用状态? 如果你有一个React组件需要的数据,它应该通过道具或设置在React组件通过getInitialState?


当前回答

State是react中的一个特殊变量,用于在组件更新时重新渲染组件

状态对于组件本身是私有的。也就是说,它不能在组件外部被访问或修改。setState/用于更新状态的钩子。每当状态更新时,组件重新呈现

状态是可变的

道具是组件的输入,并使用道具数据呈现内容

道具是不可变的(Object。冻结= true)

其他回答

props (properties的缩写)和state都是简单的JavaScript 对象。而两者都持有影响输出的信息 渲染,他们在一个重要的方面是不同的:道具被传递到 组件(类似于函数参数),而状态为 在组件中管理(类似于在组件中声明的变量 功能)。

所以简单的状态仅限于你当前的组件,但道具可以传递给任何组件你希望…你可以将当前组件的状态作为道具传递给其他组件……

同样在React中,我们有无状态的组件,它们只有道具,没有内部状态……

下面的例子展示了它们如何在你的应用程序中工作:

父组件(全状态组件):

class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}

子组件(无状态组件):

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

道具——你不能改变它的值。 States—您可以在代码中更改它的值,但当呈现发生时它将是活动的。

我们可以改变states的值但我们不能改变props的值,或者我们可以说props是不可变的而states是可变的

“Props”是传递给组件(1)的外部输入,“state”是由组件(2)管理的内部私有数据。

我想用一种简单的方式向你解释状态和道具:

状态

我们使用状态来存储一些数据。它也像一个变量,当你改变它时,你的组件将再次呈现。

要使用状态,你需要导入useState钩子:

import { useState } from 'react';
const [state_name,function_name] = useState(initial_value);

您可以通过state_name访问您的状态,也可以通过function_name更改它并为其设置一个新值。

更多信息:https://reactjs.org/docs/state-and-lifecycle.html

道具

它是一种将数据从一个组件发送到另一个组件的机制。它看起来也像CSS中的属性。例如:

<Component props_value={custom_function} />

你可以发送一个自定义函数到组件,并接收它进行操作。

更多信息:https://reactjs.org/docs/components-and-props.html