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

Posted 2023-02-23

【中文标题】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>
    

【参考方案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) =>  ....  )