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

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

文章后面说:

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

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


当前回答

状态是react处理组件所持有信息的方式。

假设有一个组件需要从服务器获取一些数据。您通常希望通知用户请求是否正在处理,请求是否失败,等等。这是一条与特定组件相关的信息。这就是状态进入游戏的地方。

通常定义状态的最佳方法如下:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { key1: value1, key2: value2 }    
  }
}

但是在react native的最新实现中,你可以这样做:

class MyComponent extends React.Component {
  state = { key1: value1, key2: value2 }    
}

这两个例子以完全相同的方式执行,这只是语法上的改进。

那么,与我们在面向对象编程中总是使用对象属性有什么不同呢?通常,在您的状态中保存的信息并不是静态的,它会随着时间的推移而变化,您的视图需要更新以反映这些变化。State以一种简单的方式提供了此功能。

状态是不可改变的!我再怎么强调也不为过。这意味着什么?这意味着你永远不应该做这样的事情。

 state.key2 = newValue;

正确的做法是:

this.setState({ key2: newValue });

使用这个。setState你的组件在更新周期中运行,如果状态的任何部分发生变化,你的组件呈现方法将被再次调用以反映这些变化。

请查看react文档以获得更详细的解释: https://facebook.github.io/react/docs/state-and-lifecycle.html

其他回答

你可以通过将它与Plain联系起来来更好地理解它 JS函数。

简单地说,

State是组件的本地状态,不能在组件外部访问和修改。它相当于函数中的局部变量。

普通JS函数

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

反应组件

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

另一方面,通过赋予组件以道具形式从父组件接收数据的能力,道具可以使组件可重用。它们等价于函数参数。

普通JS函数

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}

// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');

反应组件

class DummyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

}

// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

工作人员:Manoj Singh Negi

文章链接:解释了反应状态与道具

React组件使用state来读取/写入内部变量,这些变量可以通过以下方式更改/突变:

this.setState({name: 'Lila'})

React props是一个特殊的对象,允许程序员从父组件中获取变量和方法到子组件中。

它有点像房子的门窗。道具也是不可变的子组件不能改变/更新他们。

当父组件更改道具时,有几个方法可以帮助监听。

State:具有内部值,这意味着只在该类组件中有效,因此不能将其传递给另一个组件。

道具:另一方面,你可以将道具从父对象传递给子对象或从子对象传递给父对象。

状态是真相的起源,是您的数据存在的地方。 你可以说这种状态是通过道具表现出来的。

为组件提供支持可以使UI与数据保持同步。 组件实际上只是一个返回标记的函数。

给定相同的道具(用于显示的数据),它将始终生成相同的标记。

所以这些道具就像是将数据从原点传递到功能组件的管道。

react中的state和props都用于将数据控制到组件中,通常props由父组件设置并传递给子组件,并且它们在整个组件中都是固定的。对于将要改变的数据,我们必须使用状态。道具是不可变的,而状态是可变的,如果你想改变道具,你可以从父组件做,然后传递给子组件。