state

一個組件的顯示形態可以由數據狀態和外部參數所決定，而數據狀態就是state，一般在constructor中初始化
當需要修改里面的值狀態通過調用setState來改變，從而達到更新組件內部數據的作用，并且重新調用組件render方法，如下：

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 };
    });
  }

  render() {
    return (
      <button onClick={() => this.updateCount()}>
        Clicked {this.state.count} times
      </button>
    );
  }
}

setState還可以接受第二個參數，它是一個函數，會在setState調用完成并且組件開始重新渲染時被調用，可以用來監聽是否完成

this.setState(
  {
    name: "JS",
  },
  () => console.log("setState finished")
);

props

React的核心思想是就組件化思想，頁面會被切分成一些獨立的，可復用的組件
組件從概念上看就個函數，可以接受一個參數作為輸入值，參數就是props，所以可以把props理解為從外部傳入組件內部的數據
react具有單向數據流的特性，所以他的主要作用是從父組件向子組件中的傳遞數據
props除了可以傳字符串，數字，還可以傳遞對象，數組甚至是回調函數，如下：

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

const element = <Welcome name="Sara" onNameChanged={this.handleName} />;

上述 name 屬性與 onNameChanged 方法都能在子組件的 props 變量中訪問

在子組件中，props 在內部不可變的，如果想要改變它看，只能通過外部組件傳入新的 props 來重新渲染子組件，否則子組件的 props 和展示形式不會改變

區別

相同點：

• 兩者都是javascript對象
• 兩者都是用于保存信息
• props和state都能觸發渲染更新

不同點：

• props是外部傳遞給組件的，而state是組件內部被組件自己管理的，一般在constructor中初始化
• props在組件內部是不可修改的，但state在組件內部可以進行修改
• state是多變的，可以修改的