React-Hooks-useState_react usestate-优快云博客

本文链接：https://blog.youkuaiyun.com/wangzhan991011/article/details/116564456

本文介绍了React Hooks的概念及其解决的问题，对比了使用Hooks前后组件代码的变化，展示了如何利用useState简化状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React-Hooks-useState

Hooks是什么

Hooks 是让我们在React中编写function组件时，能运用一些 React x16.8之前function组件无法完成的事情。例如：React中function组件不能拥有自己的状态，无法实现生命周期等等。

爲什麽使用Hooks

在我們生產中，會產生非常多的高階組件嵌套，而形成嵌套地獄，如 providers，consumers，高阶组件，render props，這讓代碼非常不容易理解。爲了一些數據的傳遞我們使用高階組件為組件增加props，這會使class組件需要重新組織組件結構。并且一些邏輯代碼需要寫在類組件中，比如，生命周期函數，和一些訂閲事件。舉個簡單例子，大家可以對比一下代碼量和易理解程度

// class組件
class Count extends Component{
  constructor(props){
    super(props);
    this.state = {
      counts: 0
    }
  }
  render(){
    const {counts} = this.state;
    return (
      <div>
        <h2>{counts}</h2>
        <button onClick={()=>this.increment()}>+</button>
        <button onClick={()=>this.decrement()}>-</button>
      </div>
    )
  }
  decrement = () => {
    this.setState({
      counts: this.state.counts-1
    })
  }
  increment = () => {
    this.setState({
      counts: this.state.counts+1
    })
  }
}
// 使用hook
function Count(props){
  const [counts, setCounts] = useState(0);
  return(
    <div>
      <h2>{counts}</h2>
      <button onClick={()=>setCounts(counts+1)}>+</button>
      <button onClick={()=>setCounts(counts-1)}>-</button>
    </div>
  )
}

在16.8版本之前React中function組件是不能有自己的狀態的，因爲每次渲染函數式組件(function component) 時，函數内部的變量會重新初始化，所以無法保存
useState提供了一種可以保存函數式組件狀態的方式
useState(initialState) 使用時傳入一個狀態初始值，會返回給第一個變量
useState返回的是一個數組包含兩個元素第一個是狀態信息，第二個是用來操作這個狀態的set方法

希望大家都能對生活充滿熱愛，愛每一個愛自己的人。今天是母親節，你是不是因爲工作或者學習忘了跟媽媽說節日快樂呢。