react hooks 入门级使用 - HelloWorld开发者社区

react hooks 是react的一个新特性，需要react版本大于16.8及以上， hooks 其实就是简化react的写法，使用函数形式进行代码编写

### 一， useState

//引入useState
import React, { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>you click {count} times</p>
      <button onClick={() => {
        setCount(count + 1)
      }}>click me!</button>
    </div>
  )
}

export default Example

多状态声明

import React, { useState } from 'react';
let showSex = true
function Example2() {
//useState 要进行顺序定义 不能中断定义 如（if判断是否定义该state）
  const [sex, setSex] = useState('男')
  const [age,setAge] = userState(18)
  const [work,setWork] = userState('前端程序员')
  return (
    <div>
      <p>性别： {sex}</p>
            <p>年龄： {age}</p>
          <p>工作： {work}</p>
    </div>
  )
}

export default Example2

二， useEffect （hooks中的生命周期）

// useEffect 写法
import React, { useState, useEffect } from "react"
function Example3() {
  const [count, setCount] = useState(0)
  useEffect(()=>{
    console.log(`useEffect=> you click ${count}`)
  })
  return (
    <div>
      <p>you click {count} times</p>
      <button onClick={() => {
        setCount(count + 1)
      }}>click me!</button>
    </div>
  )
}
export default Example3

useEffect相当于componentDidMount 和 componentDidUpdate生命周期函数，useEffect是异步的，不会立即更新

模拟组件销毁，useEffect 内提供一个return 函数，useEffect 同时也可以传入第二个参数（数组），数组内可以添加useState定义的值，意思是当值发生变化时，才会执行解绑（销毁），如果设置为空，表示当前组件销毁时才会执行

import React, { useState , useEffect} from 'react';

function Money() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`进入money也页面`)
    return ()=>{
      console.log('离开money页面')
    }
  },[])
  return (
    <div>
      <p>you click {count} times</p>
      <button onClick={() => {
        setCount(count + 1)
      }}>click me!</button>
    </div>
  )
}

export default Money

三， useContext

useContext 是为了解决hooks中父子传值问题

代码：

import React, { useState, createContext, useContext } from 'react';
const CountContext = createContext()
function ReactPage() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>you click {count} times</p>
      <button onClick={() => {
        setCount(count + 1)
      }}>click me!</button>
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
  )
}
function Counter() {
  let count = useContext(CountContext)
  return (<h3>{count}</h3>)
}

export default ReactPage

父组件引入createContext 并且定义一个CountContext

然后在CountContext 下引入子组件

子组件useContext 使用CountContext的值实现父传子

------- 待更新 -------