React-Hook

image.png

react hook必须在react16.8版本以上才能使用

1.useState

 useState() 方法里面唯一的参数就是初始 state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。在示例中，只需使用数字来记录用户点击次数，所以我们传了 0 作为变量的初始 state。（如果我们想要在 state 中存储两个不同的变量，只需调用 useState() 两次即可。）

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function firstPage(){
    return (
        <h1>First Page</h1>
    )
}
function secondPage(){
    return (
        <h1>Second Page</h1>
    )
}
function App() {
    const [count, addCount] = useState(10); // 数组解构  useState的参数时设置第一个参数的初始值
    useEffect(() => {
       document.title = "你点击了"+count+"次"
       return ()=> {
        console.log("小老弟我走了");
       }
    })
    return (
        <div>
             <div>当前数:{count}</div>
            <button onClick={() => addCount(count + 1)}>Click Me</button>
           <Router>
               <ul>
                   <li>
                       <Link to="/page/first">页面1</Link>
                   </li>
                   <li>
                       <Link to="/page/second">页面2</Link>
                   </li>
               </ul>
               <Route exact path="/page/first" component={firstPage}></Route>
               <Route exact path="/page/second" component={secondPage}></Route>
           </Router>
        </div>
    )
}
export default App;

官网对useEffect的介绍：https://zh-hans.reactjs.org/docs/hooks-effect.html

**为什么在组件内部调用 `useEffect`？** 将 `useEffect` 放在组件内部让我们可以在 effect 中直接访问 `count` state 变量（或其他 props）。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。

**`useEffect` 会在每次渲染后都执行吗？** 是的，默认情况下，它在第一次渲染之后*和*每次更新之后都会执行。（我们稍后会谈到[如何控制它](https://zh-hans.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)。）你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

了解了 useEffect 可以在组件渲染后实现各种不同的副作用。有些副作用可能需要清除，所以需要返回一个函数：
 useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

使用useContext实现父子组件传值

import React, { useState, createContext,useContext } from 'react';


export const CountCreateContext = createContext();// 把这个暴露出去 子组件是单独文件的时候也能接收到父组件传递的值

function Children (){
    let count = useContext(CountCreateContext);
    return (
        <h1>{count}</h1>
    )
}

function Parent() {
    const [count, addCount] = useState(10); // 数组解构  useState的参数时设置第一个参数的初始值
    return (
        <div>
            <div>当前数:{count}</div>
            <button onClick={() => addCount(count + 1)}>Click Me</button>
            <CountCreateContext.Provider value={count}>
                <Children></Children>
            </CountCreateContext.Provider>
        </div>
    )
}
export default Parent;

useReducer使用：

import React, {
    useReducer
} from "react";

function UseReducer() {
    const [count, dispatch] = useReducer((state, action) => {
        switch (action) {
            case "add":
                return state + 1;
            case "sub":
                return state - 1;
            default:
                return state
        }
    }, 0)

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={()=>{dispatch("add")}}>+</button>
            <button onClick={()=>{dispatch("sub")}}>-</button>
        </div>
    )
}

export default UseReducer;

image.png
image.png

useMemo:

import React ,{useState,useMemo} from "react";


function UseMemo(){
    const [xiaohong,setXiaoHong] = useState("小红在代课");
    const [zhiling,setZhiLing] = useState("志玲在代课");


    return (
        <div>
            <button onClick={()=>{setXiaoHong(new Date().getTime())}}>小红</button>
            <button onClick={()=>{setZhiLing(new Date().getTime())}}>志玲</button>

            <Children name={xiaohong}>{zhiling}</Children>
        </div>
    )
}

function Children({name,children}){

    function changeXiaohong(name){
        // 这里有个问题 只要点击按钮 就会执行
        console.log("来了来了")
        return name+","+new Date()
    }
    // 使用useMemo--只有name改变的时候才执行函数
    const newName = useMemo(()=>{changeXiaohong(name)},[name]);
    return (
        <div>
            <div> {newName}</div>
            <div>{children}</div>
        </div>
    )

}

export default   UseMemo

import React ,{useState,useRef} from "react";

function UseREF (){

const inputRef = useRef(null);

const addInput=()=>{
    inputRef.current.value = "111111"
}

return (
    <div>
        <input ref={inputRef}></input>
        <button onClick={addInput}>添加</button>
    </div>
)

}

export default UseREF;