大多数时候，你的子组件是无状态的，这意味着它们代表了它的父组件给它的数据/信息。

另一方面，状态处理的是处理组件本身，状态可以在组件内部通过setState和useState钩子改变。

例如

class Parent extends Component{
  constructor(props){
    super(props);
    this.state = {
      fruit: 'apple'
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(){
    this.setState({fruit: 'mango'})
  }
  render(){
    return (
      <div>
      <Child  fruit={this.state.fruit} />
      <button onClick={this.handleChange}>Change state</button>
      </div>
    )
  }
}

当点击按钮时，父类将其状态从apple更改为mango，并将其状态作为道具传递给子组件。现在，没有状态的子组件根据父组件的状态显示不同的标题。

class Child extends Component{

  render(){
    return(
      <h1>I have received a prop {this.props.fruit}</h1>
    )
  }
}

所以在根级别上，道具是父进程与子进程的通信，而状态是描述父进程的情况等。

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

道具只是属性的简写。道具是组件之间相互交流的方式。如果你熟悉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用于可变数据或将更改的数据。这对于用户输入特别有用。以搜索栏为例。用户将输入数据，这将更新他们所看到的内容。

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

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

道具是在渲染时传递给组件的值、对象或数组。这些道具通常是组件中创建UI、设置某些默认功能或填充字段所需的值。道具也可以以父组件传递给子组件的函数的形式出现。

状态在组件(子组件或父组件)中进行管理。

下面是我找到的一个支持这一点的定义: