在组件接收到props的之后，在渲染组件自己数据的之前 需要做初始化操作，应该使用哪个生命周期方法呢（如何确保在渲染数据之前自己初始化完成）？

Question

请问一下，在组件接收到props的之后，在渲染组件自己数据的之前 需要做初始化操作，应该使用哪个生命周期方法呢（如何确保在渲染数据之前自己初始化完成）？

interface TestCompProp {
    data: string
}

const TestComp = (props: TestCompProp) => {
    
    // 需要在渲染return之前就做初始化的操作: 请问如下的代码应该在哪个生命周期下执行
    const updatedData = props.data + '_updated'

    return <>
    {
        updatedData
    }

    </>
}

Answer 1

给你提供三种场景

interface TestCompProp {
  data: string
}

const TestComp = (props: TestCompProp) => {

  //  1.简单的显示 就这样
  // const updatedData = props.data + '_updated'

  //  2.依赖  props.data 存在大数据量计算
  // const updatedData = useMemo(() => {
  //   return props.data + '_updated'
  // }, [props.data])

  //  3.子组件控制新值
  const [updatedData, setUpdatedData] = useState(()=>{
    //  做一些初始化操作
    return props.data + '_updated'
  })
  useEffect(() => {
    setUpdatedData(props.data + '_updated')
  }, [props.data])


  return <>
    {updatedData}

  </>
}

Answer 2

这样写就可以，在渲染过程中改变 data 的值