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

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

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

状态是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

Props:表示“只读”数据，是不可变的，引用父组件的属性。

状态:表示可变数据，它最终会影响页面上呈现的内容，并由组件本身内部管理，通常会由于用户输入而不断更改。

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

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

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

状态

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

要使用状态，你需要导入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

道具只是属性的简写。道具是组件之间相互交流的方式。如果你熟悉React，那么你应该知道道具是从父组件向下流动的。

还有一种情况是，你可以有默认的道具，这样即使父组件没有传递道具，道具也会被设置。

这就是为什么人们认为React具有单向数据流。这需要一些理解，我可能会在后面的博客中对此进行讨论，但现在只要记住:数据从父流向子。道具是不可变的(是指不变的)

所以我们很高兴。组件从父组件接收数据。都整理好了，对吧?

嗯，不完全是。当组件从父组件以外的对象接收数据时会发生什么?如果用户直接向组件输入数据呢?

这就是我们有状态的原因。

状态

道具不应该改变，所以状态上升。组件通常没有状态，因此被称为无状态。使用状态的组件称为有状态的。在聚会上随便说说你的小秘密，然后看着人们慢慢地离你而去。

所以使用状态是为了让组件可以在它所做的任何渲染之间跟踪信息。当你setState时，它更新状态对象，然后重新渲染组件。这非常酷，因为这意味着React会处理困难的工作，并且速度非常快。

作为状态的一个小例子，这里是一个搜索栏的片段(如果你想了解更多关于React的知识，值得看看这门课程)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

总结

道具和状态的作用类似，但使用方式不同。大多数组件可能是无状态的。

道具用于将数据从父组件传递给子组件或由组件本身传递。它们是不可变的，因此不会被改变。

State用于可变数据或将更改的数据。这对于用户输入特别有用。以搜索栏为例。用户将输入数据，这将更新他们所看到的内容。