父组件异步传递的props，子组件更新显示

父组件给子组件传值，props发生改变，子组件没有及时更新
原因：第一次加载成功后，后面的异步（http请求返回的数据、setTimeout、点击事件等）改变值，react只会重新渲染render，其他初始值的渲染在加载页面就已经渲染完毕，值的更改不会触发重新渲染。

• 父组件

import React from "react";
import Component from './components/useEffect'

class Test extends React.Component {
  state = {
    count:1
  }

  changeNumber =()=>{
    let {count} = this.state;
    count++;
    this.setState({
      count
    })
  }
  

  componentDidMount() {
    //父组件异步设置count
    setTimeout(()=>{
      this.setState({
        count:100
      })
    })
  }
  

  render() {
    const {count} = this.state;
    return <>
      <h1>测试页面number:{count}</h1>
      <div>
        <button onClick={this.changeNumber}>改变值</button>
      </div>
      <Component number={count} />
    </>;
  }

}
export default Test

• 子组件

import React, { useRef, useEffect,useState } from "react";

interface PropsType {
  number?:number
}

const Asynchronous : React.FC<PropsType>=(props)=>{
  //接受父组件传递的值
  const [number,setNumber] = useState(props.number); //只有初始化时执行赋值

  //子组件的值
  const [count,setCount] = useState(0)


  useEffect(()=>{
    console.log(props.number)
    setNumber(props.number)
  }) //所有更新都会执行

  useEffect(()=>{
    console.log(props)
  },[]) //仅在挂载和卸载的时候执行
 
  useEffect(()=>{
    console.log(count)
  },[count]) //仅在 count更改时执行

  const changeCount = ()=>{
    setCount(count+1)
  }

  // 父组件传递的props发生改变时，会重新渲染的只有render，所以用props.number可以获取到最新的值
  // 父组件更新时,若想更新number，则需要useEffect
  return <div>
    数字：{props.number}-{number}

    <div>
      {count}
      <button onClick={changeCount}>改变子组件的值</button>
    </div>
  </div>

}
export default Asynchronous