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

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

文章后面说:

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

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


当前回答

react中“state”和“props”的区别。

React根据状态控制和渲染DOM。有两种类型的组件状态:props是组件之间传输的状态,state是组件的内部状态。Props用于将数据从父组件传输到子组件。组件在内部也有自己的状态:只能在组件内部修改的状态。

一般来说,某个组件的状态可以是子组件的道具,道具会传递给子组件,这是在父组件的呈现方法中声明的

其他回答

给出最简单的解释,补充上述评论:

根据React的官方文档,他们将“状态”视为

To “remember” things, components use state.

props可以理解为从父组件传递给子组件的变量。

如果你想在应用中记住一些东西,你会使用状态如果你想传递数据,你会使用道具。

让我给你另一个类比,假设你想把你脑子里的前25个自然数的序列相加。

1+2+3+4.....

从1开始,然后加2,现在是3,然后加到现在的总数(6),然后加4到现在的总数(6),所以新的总数是10。

当前的总和是程序的状态,假设您需要找到总和的平均值。你要把这个和代入一个方程,然后把这个和作为道具传下去。

希望这能说得通。

道具和状态之间的关键区别在于,状态是内部的,由组件本身控制,而道具是外部的,由呈现组件的任何东西控制。

function A(props) {
  return <h1>{props.message}</h1>
}

render(<A message=”hello” />,document.getElementById(“root”));


class A extends React.Component{  
  constructor(props) {  
    super(props)  
    this.state={data:"Sample Data"}  
  }  
  render() {
    return(<h2>Class State data: {this.state.data}</h2>)  
  } 
}

render(<A />, document.getElementById("root"));

状态可以改变(可变的) 而道具不能(不可变)

这是我在使用react时学到的。

组件使用Props从外部环境中获取数据,例如另一个组件(纯组件、函数组件或类)或一般类或javascript/typescript代码 用于管理组件内部环境的状态意味着组件内部的数据变化

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

主要的区别是状态是组件私有的,只能在组件内部更改,而道具只是静态值和键的子组件,通过父组件传递,不能在子组件内部更改