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

【问题标题】：What is solution for constructor in functional components in react native?react native 功能组件中构造函数的解决方案是什么？
【发布时间】：2020-11-01 17:51:41
【问题描述】：

让我带你解决我的问题。我正在制作一个计时器功能组件，我将 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>
    }


}

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

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

改用useMemo：

useMemo(() => {
  console.log('This is useMemo')
}, []);

【讨论】：

【解决方案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>

    };

【讨论】：

【解决方案3】：

checkout React.memo，如果子组件的 props 没有改变，witch 会阻止子组件重新渲染

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

【讨论】：