React元件的狀態及生命週期事件

定義元件

元件定義有兩種方式，函式定義和類定義

函式定義元件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById(`root`)
);

類定義元件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
ReactDOM.render(
  <Welcome name="kevin" />,
  document.getElementById(`root`)
);

警告:

元件的返回值只能有一個根元素。如果ReactDOM.render方法渲染元件裡包含多個同級別的元件，需要用一個DIV將其他元件包裹

類定義元件有區域性狀態和生命週期鉤子事件

通常類的狀態是在類的建構函式中宣告的

class Clock extends React.Component {
  constructor(props) {
    super(props);//只要類元件宣告瞭建構函式就必須先呼叫父類的建構函式
    this.state = {date: new Date()};
  }

  //更新狀態
  this.setState({
      date: new Date()
  });
}

警告:

如果你不在 render() 中使用某些東西，它就不應該在狀態中

鉤子函式

componentDidMount(當元件插入到DOM中觸發)
componentWillUnmount（當元件移出DOM中後觸發）

正確使用狀態

1.不要直接更新狀態，而是通過setState方法

// Wrong
this.state.comment = `Hello`;

// Correct
this.setState({comment: `Hello`});

2.狀態的更新可能是非同步的，你不應該依靠它們的值來計算下一個狀態

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

當要被更新的狀態依賴於props或它自身時，setState需要傳遞一個方法作為引數,第一個引數為它的前一個狀態的值，第二個引數為props物件
// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));