Reactv16.8.6生命周期函数

2019 年 10 月 3 日
筆記

????????

React ????????????????

??????????? `DOM` ???????????????

constructor(props)

???????? state ? ?????????????????

????????????????????????????super(props)????????BUG
???????????????1. ??? state 2. ???????????
????????? setState() ??,????????setState()?? state
??? props ??? state ??? bug

constructor(props) {    super(props);    // ??????? this.setState()    this.state = {      counter: 0,      name:props.name // ???????props.name???? state.name?????     };    this.handleClick = this.handleClick.bind(this);  }

static getDerivedStateFromProps() ????????

????? render ???????????????????????????????? state?????null ?????????

?????? state ??????????props ????

render()

render ? class ?????????

????????????? props ? state ???????????????

React ?????JSX?????????DOM????????
???fragments? ?render?????????? frgments
Portals????????????DOM????portals
????????? ?DOM???????????
Boolean ? null???????

render???????????????? state??????????????????????????????

????????????????????????????shoouldComponentUpdate?????false,?????render??

class Example extemds React.Component{  shouldComponentUpdate(nextProps, nextState){    return false  }  render(){ // ????    <div>owen</div>    }  }

componentDIdMount()

?????????????DOM????????????????

??? `props` ? `state` ??????????????????????????

static getDerivedStateFromProps() ????????(???)

shouldComponentUpdate(nextProps, nextState) ????????

?state ? props ?????????????????????true,?????????

???????????????????? state ? props ????????? state ????????

???????????????????????????“??”??????????? bug??????????? PureComponent ?????????? shouldComponentUpdate()?PureComponent ?? props ? state ??????????????????????

render()(???)

getSnapshotBeforeUpdate() ????????

????????????????DOM???????????????????DOM????????? ????????????????????? componentDidUpdate()

class ScrollingList extends React.Component {    constructor(props) {      super(props);      this.listRef = React.createRef();    }      getSnapshotBeforeUpdate(prevProps, prevState) {      // ????? list ????? items ?      // ?????????????????????      if (prevProps.list.length < this.props.list.length) {        const list = this.listRef.current;        return list.scrollHeight - list.scrollTop;      }      return null;    }      componentDidUpdate(prevProps, prevState, snapshot) {      // ???? snapshot ?????????????? items?      // ??????????? items ????? items ?????      //???? snapshot ? getSnapshotBeforeUpdate ?????      if (snapshot !== null) {        const list = this.listRef.current;        list.scrollTop = list.scrollHeight - snapshot;      }    }      render() {      return (        <div ref={this.listRef}>{/* ...contents... */}</div>      );    }  }

?????????? getSnapshotBeforeUpdate ?? scrollHeight ????? “render” ???????? render?? “commit” ???????? getSnapshotBeforeUpdate ? componentDidUpdate??????????

componentDidUpdate(prevProps, prevState, snapshot)

????????????????????????,??????? setState?????????????????????????????????????

componentDidUpdate(prevProps) {    // ??????????? props??    if (this.props.userID !== prevProps.userID) {      this.fetchData(this.props.userID);    }  }

????? shouldComponentUpdate() ???? false?????? componentDidUpdate()?

???? `DOM` ????????????

componentWillUnmount()

???????????????????????????? ??????????????componentDidMount() ????????

???????????????????????????????????

Error boundaries???????????????????????? UI??????????? React 16??????

static getDerivedStateFromError(error) ????????

??????????????????????????????????state??????????????????? componentDidCatch()

componentDidCatch(error, info) ????????

????????????????

????????????? setState ?? componentDidCatch() ???? UI????????????????? ?????? getDerivedStateFromError() ????????

class ErrorBoundary extends React.Component {    constructor(props) {      super(props);      this.state = { hasError: false };    }      static getDerivedStateFromError(error) {      // ?? state ??????????? UI      return { hasError: true };    }    componentDidCatch(error, info) {      // "????" ??:      //   in ComponentThatThrows (created by App)      //   in ErrorBoundary (created by App)      //   in div (created by App)      //   in App      logComponentStackToMyService(info.componentStack);    }    render() {      if (this.state.hasError) {        // ?????????????  UI        return <h1>Something went wrong.</h1>;      }        return this.props.children;    }  }

Example

class Square extends React.Component {      constructor(props) {      super(props);      this.state = {        value:null      };    }    static getDerivedStateFromProps(props, state) {      // ????????????????????????????????????????state??null?????props?????state???    }     componentDidMount() { // ?????? DOM ????      console.log('DidMount: 1')    }      shouldComponentUpdate(){      // ???    }      getSnapshotBeforeUpdate(){      //    }    componentDidUpdate() {      // ???    }      static getDerivedStateFromError() {        // ???    }    componentDidCatch(){      // capture error    }    compoentwillUnmount(){ // ????????      console.log('UnMount: end')      }    render() {      return (        <button className="square" onClick = {()=>{this.setState({value:'X'})}        }>          {this.state.value}        </button>      );    }  }

Owen ?????