React Hooks---useState/useEffect/useContext的基本使用

useState

• useState是react自带的一个hook函数，它的作用就是用来声明状态变量.useState这个函数接收的参数是我们的状态初始值,它返回了一个数组，这个数组的第 [0]项是当前当前的状态值，第 [1]项是可以改变状态值的方法函数。

import React,{useState} from "react"

export default ()=>{
    let [count,setCount] = useState(0);
    let addCount = ()=>setCount(count+1);
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={addCount}>点击</button>
        </div>
    )
}

• useState : 创建一个状态,这个状态为0
• count : 代表当前状态值也就是0
• setCount : 更新状态的函数
• addCount = ()=>setCount(count+1);调用setCount就可以用来修改状态
• 可以在一个函数组件中使用多个,如下所示：

export default ()=>{
    let [count,setCount] = useState(0);
    let [age,setAge] = useState(0);
    let [number,setNumber] = useState(0);
    
}

useEffect

• 我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里，比如componentDidMount，componentDidUpdate和componentWillUnmount。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三。
• useEffect中有两个参数，第一个参数是一个函数，第二个参数是一个依赖的数据。第二个参数用来决定是否执行里面的操作，可以避免一些不必要的性能损失，只要第二个参数中的成员的值没有改变，就会跳过此次执行。如果传入一个空数组 [ ]，那么该effect 只会在组件 mount 和 unmount 时期执行。

useEffect模拟componentDidMount && componentDidUpdate

import React,{useState,useEffect} from "react"

export default ()=>{
   let [title,setTitle] = useState(0);
   let updateTitle = ()=>setTitle(title+1);
   return (
       <div>
           <h2>{title}</h2>
           <button onClick={updateTitle}>点击</button>
       </div>
   )
   
   //参数是一个函数  每次mount 或者 update都会调用当前函数
   useEffect(()=>{
       document.title = `页面为${count}`;
   })
   
}

useEffect模拟componentDidMount

import React,{useState,useEffect} from "react"

export default ()=>{
    let [title,setTitle] = useState(0);
    let updateTitle = ()=>setTitle(title+1);
    return (
        <div>
            <h2>{title}</h2>
            <button onClick={updateTitle}>点击</button>
        </div>
    )
    
    //将第二个参数设置为一个空数组则只会在componentDidMount中执行
    useEffect(()=>{
        document.title = `页面为${count}`;
    },[])
    
}

useEffect模拟componentWillUnMount

• useEffect 中还可以通过让函数返回一个函数来进行一些清理操作，比如取消定时器等

useEffect = (()=>{
    return ()=>{
        //unmount时调用这里
        document.removeEventListener();
    }
},[])

useContext

页面展示如下：

实现代码如下：

1.封装createContext.js文件

import { createContext } from "react";
const myContext = createContext(null);
export default myContext;

2.父组件

• 关键代码：<myContext.Provider value={count}>xxx </myContext.Provider>

import React, { useState} from "react";
import Counter from './Counter'   //引入子组件
import myContext from './createContext'  //引入createContext文件

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h4>我是父组件</h4>
      <p>点击了 {count} 次!</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我
      </button>

      {/* 关键代码 */}
      {/* 提供器 */}
      <myContext.Provider value={count}>
        <Counter />
      </myContext.Provider>
    </div>
  );
}
export default App;

3.子组件

• 关键代码：const count =useContext(myContext)

import React, { useContext} from 'react';
import myContext from './createContext'  //引入createContext文件

// 关键代码
function Counter() {
    const count = useContext(myContext);  // 得到父组件传的值
    return (
        <div>
            <h4>我是子组件</h4>
            <p>这是父组件传过来的值：{count}</p>
        </div>
    )
}