持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

前言

react以前是没有hook的，是16.8新增的属性。今天咱们来学习下react的hook，看看它是怎么使用的。

react的hook

组件

react的组件有2种，一种是class组件，另一种是函数组件。

我们可以在class定义state，定义方法。状态可以通过setState方法同步数据。

class App extends React.Component {
  state = {
    text: 'hello world',
    number: 1
  }

  clickFn = (text) => {
    this.setState({
      text
    })
  }

  render () {
    return (
      < div onClick={this.clickFn.bind(this, '答案cp3')}>
        {this.state.text}
      </div>
    )
  }
}

点击按钮后，text会变成答案cp3。

但是在函数组件中，并不能对同步数据状态，因为它定义的时候就是把它当作纯函数，他是没有状态的。

用个例子如下：

function App () {
  const text = 'hello world'
  const clickFn = (word) => {
    console.log(this)
    this.setState({
      text: word
    })
  }
  return (
    <div onClick={clickFn.bind(this, '答案cp3')}>
      <span>{text}</span>
    </div >
  )
}

它是不能更新的，因为函数组件的this并不是当前实例，它的this是undefined。

就算你不使用this,直接赋值，jsx的dom也是不会更新的。

function App () {
  let text = 'hello world'
  const clickFn = (word) => {
    text = word
  }
  return (
    <div onClick={clickFn.bind(this, '答案cp3')}>
      <span>{text}</span>
    </div >
  )
}

所以react为了在函数组件实现数据同步更新，所以就出了一个hook。我们可以通过hook来保持数据的同步。

比较常用的有4种hook（useState，useEffect，useContext，useReducer），然后我们还可以实现自定义hook。

下面来看第一种常用的hook，useState。

useState

第一种是useState，它返回数组，2个值，解构出来就是初始值，和更新值的方法。我更新值的时候把第二个方法调用一下即可更新值。

名字可以自定义，方法的名称最好加上set的前缀，这样会更好理解。

我们把上面的例子改写一下

function App () {
  const [text, setText] = useState('hello world')
  const clickFn = (text) => {
    setText(text)
  }
  return (
    <div onClick={clickFn.bind(this, '答案cp3')}>
      <span>{text}</span>
    </div >
  )
}

点击的时候，text由hello world变成答案cp3, 数据可以同步更新了。

总结

通过引入useState可以实现在函数组件同步更新数据，解决了之前只能通过class组件更新数据的问题。

学习下react的hook（useState）

前言

react的hook

组件

useState

总结