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 将跳过渲染组件，并重用上次渲染的结果。&nbsp; &nbsp; const FunctionalComponent = React.memo<{initialValue: number}>({initialValue}) => {&nbsp; &nbsp; &nbsp; const [timerValue, setTimerValue] = useState(initialValue)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; console.log('Set State')&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('UseEffects called')&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setInterval(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimerValue(timerValue - 1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 1000)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }, [])&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; return <View><Text style={styles.textStyle}>{timerValue}&nbsp;&nbsp;</Text></View>&nbsp; &nbsp; };

Answer 2

签出 React.memo，如果子组件的 props 没有改变，女巫将阻止重新渲染const&nbsp;FunctionalComponent&nbsp;=&nbsp;React.memo((props:&nbsp;any)&nbsp;=>&nbsp;{&nbsp;....&nbsp;}&nbsp;)

Answer 3

人们建议useEffect但它会在渲染后被调用。改用useMemo：useMemo(() => {&nbsp; console.log('This is useMemo')}, []);