react native 功能组件中构造函数的解决方案是什么？

Question

让我带你解决我的问题。我正在制作一个计时器功能组件，我将 startValue 传递给组件，然后该组件将使用通过 props 传递的 startValue 启动计时器（以秒为单位减少一秒）。const FunctionalComponent = (props: any) => {const [timerValue, setTimerValue] = useState(props.initialValue)console.log('Set State')useEffect(() => {    console.log('UseEffects called')    setInterval(() => {        setTimerValue(timerValue - 1)    }, 1000)}, [])return <View><Text style={styles.textStyle}>{timerValue}</Text></View>}我在 Parent 中的渲染功能。render() {    return <View style={styles.mainView}>        <FunctionalComponent  initialValue={30} />    </View>}现在，每次 react 重新渲染父组件时，FunctionalComponent 都会被调用并重置 timerValue 值。我使用类组件构造函数解决了这个问题，但我想知道在功能组件中是否有任何解决方案可以做到这一点。class OTPTimer extends Component {    constructor(props: any) {        super(props)        this.state = {            timeLeft: props.fromStart        }        if (props.startTimer) {            this.startTimer()        }    }    componentDidUpdate(prevProps: any) {        if (!prevProps.startTimer && this.props.startTimer) {            this.startTimer()            this.setState({                timeLeft: this.props.fromStart            })        }    }    startTimer = () => {        var interval = setInterval(() => {            this.setState({                timeLeft: this.state.timeLeft - 1            })            if (this.state.timeLeft === 0) {                clearInterval(interval)            }        }, 1000)    }    render() {        return <Text style={globalStyles.testStyleThree}>{`00:${this.state.timeLeft > 9 ? this.state.timeLeft : `0${this.state.timeLeft}`}`}</Text>    }}

Answer 1

这就是使用React.memo的意义所在，以防止在子组件的 props 不变时重新渲染它们。

React.memo 是一个高阶组件。它类似于 React.PureComponent 但用于函数组件而不是类。

如果你的函数组件在给定相同的 props 的情况下呈现相同的结果，你可以将它包装在对 React.memo 的调用中，以便在某些情况下通过记忆结果来提高性能。这意味着 React 将跳过渲染组件，并重用上次渲染的结果。

    const FunctionalComponent = React.memo<{initialValue: number}>({initialValue}) => {

      const [timerValue, setTimerValue] = useState(initialValue)

    

      console.log('Set State')

    

      useEffect(() => {

          console.log('UseEffects called')

    

          setInterval(() => {

              setTimerValue(timerValue - 1)

          }, 1000)

    

      }, [])

    

      return <View><Text style={styles.textStyle}>{timerValue} 

 </Text></View>

    };

Answer 2

签出 React.memo，如果子组件的 props 没有改变，女巫将阻止重新渲染

const FunctionalComponent = React.memo((props: any) => { .... } )




Answer 3

人们建议useEffect但它会在渲染后被调用。

改用useMemo：

useMemo(() => {

  console.log('This is useMemo')

}, []);