在 REACTjs 中 props 和 state 是如何工作的？

Question

我是 reactjs 新手。我真的不明白 props 和 state 是如何工作的。根据我的研究，我发现道具是从父母传给孩子的。并且状态只能在单个组件中使用。但是当我看到下面的这些代码时，我不知道它是如何工作的。有人可以为我提供一个很好的例子和解释。谢谢

let 和 var 的区别不仅如此

default class WildList extends React.Component {

    constructor(props){
    super(props);
    this.props = props;

    let {keyword, dealstatus} = this.props;

    this.state = {
    keyword
    }
    }

    }

PS = 这个 WildList 类也在不同的组件中使用。

Answer 1

State - 这是在组件内部维护的数据。它是本地的或由该特定组件拥有。组件本身将使用setState 函数更新状态。

Props - 从父组件传入的数据。 props 在接收它们的子组件中是只读的。不过也可以传入回调函数，可以在child内部执行，发起更新。

区别在于哪个组件拥有数据。状态在本地拥有并由组件本身更新。道具归父组件所有，并且是只读的。只有在将回调函数传递给 child 以触发上游更改时，才能更新 props。

Answer 2

State 和 Props 解释here

还有let和var解释here

而且你应该使用搜索功能，而且总是只有一个问题。

Answer 3

在React 中，State 保存有关使用它的组件的发生或值的信息。我们可以从state中读取值，也可以在state中设置值。

另一方面，Props 是只读的。它们是从父组件传递的，用于与子组件共享父组件的state。您可以修改您的方案，如：

default class WildList extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        keyword: this.props.keyword
      }
    }
 }

希望这会对你有所帮助。

Answer 4

简单状态特定于单个组件。您可以在状态内定义属性。一旦你通过 setstate 改变了状态，页面将再次呈现。道具示例如下。

export default class Devices extends Component {
 constructor(props) {
    super(props);
    this.state = {
      userName: "Name 1",
      itemCount: 0, // this property can use within the Devices Component not in Device detail
     }
  }

  render() {
     .....
     //you can pass username to DeviceDetail page 
     <div>
          <DeviceDetail userName={this.state.userName} />
     </div>
}
}

//Inside DeviceDetail class
export default class DeviceDetail extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userName: props.userName, //you can call username using props
        }
    }
}

Var vs let

  getAllDevices = () => {
    var totalDevicesCount = 0; //  property is initially in the global scope. 

    let apiUrl = ....URL
    var response = fetch(apiUrl);
    const data = response.json();
    totalDevicesCount = data.length;

    if (data.length > 0) {
      this.state.itemCount = totalDevicesCount; // Since this is Var can use inside different block as well but inside this if condition you cannot use apiUrl. because it's let
    }

  }