React学习笔记之十四: React hooks初探

React Hooks

本文参考主要博文:

阮一峰老师的 React-hooks 教程

How to fetch data with React Hooks?

useEffect 完整指南

React-hooks 的官方文档

demo

React hooks 的主要功能是让函数式组件能够模拟出自身的状态 state 和生命钩子函数

常用的 React Hooks 函数包括

• useState
• useEffect
• useContext
• useReducer

1. useState

useState 主要是创建一个 state 变量并赋予初始值

通过数组解构的方式来获取 state 变量和一个改变该变量的函数

import React, {
    useState, useEffect } from 'react'
import {
    Button, Notify } from 'zent'

export function Counter(props) {
   
  // 这里的counter为state中的一个值且其初始值为0
  const [counter, setCounter] = useState(0)

  const handleSetCounter = number => () => {
   
    // 通过调用setCounter可以实现对于counter的赋值
    setCounter(number)
  }

  return (
    <div>
      <div>{
   counter}</div>
      <Button onClick={
   handleSetCounter(counter + 1)} type="primary">
        +1
      </Button>
      <Button type="primary" onClick={
   handleSetCounter(counter - 1)}>
        -1
      </Button>
      <