React Function components VS Class components

前言

Hook出现之前我们对比Function components和 class components之间差异性,一般会对比:

• 渲染性能
• 纯的组件
  hooks出现之后,我们可以得出他们最大的差异性:

函数组件能够捕获渲染的值也就是所谓的capture value

示例

函数组件:

const Capture = () => {
  const [count, setCount] = useState(0);
  const handlerChange = (e) => {
    setCount(e.target.value)
  }

  const handlerClick = () => {
    setTimeout(() => {
      alert(count)
    }, 3000)
  }

  return (
    

      get count
      
    
  )
}

export default Capture;

我们可以看到三秒之后获取的还是之前输入的值

class组件

class Claz extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }

    handlerChange = (e) => {
        this.setState({
            count: e.target.value
        })
    }

    handlerClick = () => {
        setTimeout(() => {
            alert(this.state.count)
        }, 3000)
    }

    render() {
        return (
            

              get count
              
            
          )
    }
}

hook如何避免capture value的问题

答案是 useRef

const Capture = () => {
  const [count, setCount] = useState(0);
  const latestCount = useRef(0);
  const handlerChange = (e) => {
    latestCount.current = e.target.value;
    setCount(e.target.value)
  }

  const handlerClick = () => {
    setTimeout(() => {
      alert(latestCount.current)
    }, 3000)
  }

  return (
    

      get count
      
    
  )
}

使用useRef手动的来跟踪变化,其实我们有更好的方式来自动追踪变化

const Capture = () => {
  const [count, setCount] = useState(0);
  const latestCount = useRef(0);
  const handlerChange = (e) => {
    setCount(e.target.value)
  }

  useEffect(() => {
    latestCount.current = count;
  }, [count])

  const handlerClick = () => {
    setTimeout(() => {
      alert(latestCount.current)
    }, 3000)
  }

  return (
    

      get count
      
    
  )
}