Какое решение для конструктора в функциональных компонентах в React Native?

Question

Позвольте мне рассказать вам о моей проблеме. Я делаю функциональный компонент таймера, я передаю startValue компоненту, а затем этот компонент запускает таймер (уменьшая на единицу в секунду), используя startValue, переданный через props.

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>

}

My функция рендеринга в родительском компоненте.

render() {
    return <View style={styles.mainView}>
        <FunctionalComponent  initialValue={30} />
    </View>
}

Теперь каждый раз, когда реагирует на повторный рендеринг родительского компонента, вызывается 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

checkout React.memo , ведьма предотвратит повторный рендеринг дочернего компонента, если его свойства не изменились

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

Answer 2

Здесь имеет смысл использовать React.memo , чтобы предотвратить повторную визуализацию дочерних компонентов, когда их свойства не меняются.

React.memo - это компонент более высокого порядка. Он похож на React.PureComponent, но для функциональных компонентов вместо классов.

Если ваш функциональный компонент отображает тот же результат при тех же свойствах, вы можете обернуть его в вызов 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>

    };