React Hooks钩子中API的使用示例分析

import React, { useState } from 'react'
export default function UseState() {
    let [count,setCount]=useState(10)
    // 他是异步的操作，在页面数据会进行更新，但是下面打印的数据是没有更新，原因是因为他是异步的
    const plus=()=>{
        setCount(count+5)
    }
  return (
    <div>
        {/* 函数组件中没有this指向，我们可以直接调用 */}
        <div>{count}</div>
        <button onClick={()=>setCount(count++)}>加加</button>
        <button onClick={plus}>plus</button>
    </div>
  )
}

useEffect(()=>{ 逻辑})  页面数据只要更新就会触发useEffect()
useEffect(()=>{},[])  useEffect() 只执行一次，只有页面第一次加载的时候触发，componentDidMount
useEffect(()=>{}, [num,count]) 监听数据改变执行，num和count发生变化的时候触发。compoentDidUpdate
useEffect(()=>{
    return ()=>{
        console.log("相当于compoentDidUnmount")
    }
},[])
//回调函数返回函数，返回的函数相当于销毁生命周期函数。

import React, { useMemo, useState } from 'react'
export default function UseState() {
    let [count,setCount]=useState(10)
    // useMemo必须有返回值，而且他是在dom更新发生变化，比useEffect执行的快，useEffect是dom更新完才执行的，监听count值变化
    const double=useMemo(()=>{
      console.log('useMemo触发');
      return count+6
    },[count])
  return (
    <div>
        {/* 函数组件中没有this指向，我们可以直接调用 */}
        <div>{count} {double}</div>
        <button onClick={()=>setCount(count*2)}>count二倍</button>
    </div>
  )
}

//useMemoe缓存组件
function Home() {
    let [count,setcount] = useState(10)
    let [num,setnum] = useState(20)
    //通过useMemoe对组件进行缓存，避免父组件中根子组件无关数据更新导致子组件的重新渲染。
    let theme = useMemo(()=>{
        return (
            <Theme count={count}></Theme>
        )
    },[count])
    return (
        <div>
            <h3 >count--{count}</h3>
            <button onClick={()=>setcount(count+1)}>count++</button>
            <h3 >num--{num}</h3>
            <button onClick={()=>setnum(num+1)}>num++</button>
 
            <hr />
            {theme}
        </div>
    )
}
function Theme(props){
    useEffect(()=>{
        console.log("子组件渲染")
    });
    return (
        <h3>子组件接受数据{props.count}</h3>
    )
}

function Home() {
    let [count,setcount] = useState(10)
    let [num,setnum] = useState(20)
    return (
        <div>
            <h3 >count--{count}</h3>
            <button onClick={()=>setcount(count+1)}>count++</button>
            <h3 >num--{num}</h3>
            <button onClick={()=>setnum(num+1)}>num++</button>
            <hr />
            <Theme count={count}></Theme>
        </div>
    )
}
 //通过memo对组件进行缓存，避免父组件中根子组件无关数据更新导致子组件的重新渲染。
const Theme = memo((props)=>{
    useEffect(()=>{
        console.log("子组件渲染")
    });
    return (
        <h3>子组件接受数据{props.count}</h3>
    )
})

function Home() {
    let [count,setcount] = useState(10)
    let [num,setnum] = useState(20)
    const handlerCount = ()=>{
        console.log(count);
    }
    const callback = useCallback(()=>{
        handlerCount();
    },[count]);
    return (
        <div>
            <h3 >count--{count}</h3>
            <button onClick={()=>setcount(count+1)}>count++</button>
            <h3 >num--{num}</h3>
            <button onClick={()=>setnum(num+1)}>num++</button>
 
            <hr />
            <Theme count={count} handle={callback}></Theme>
        </div>
    )
}
 //通过memo对组件进行缓存，避免父组件中根子组件无关数据更新导致子组件的重新渲染。
const Theme = memo((props)=>{
    useEffect(()=>{
        console.log("子组件渲染")
    });
    return (
        <div>
             <h3>子组件接受数据{props.count}</h3>
             <button onClick={()=>props.handle()}>点击</button>
        </div>
    )
})

import React, { useContext, useState } from 'react';
//useContext用于获取context状态树的值
// 首先创建一个空的context对象
const ThemContext =React.createContext();
function UseState() {
    let [color,setColor]=useState('#ff0000')
  return (
    <div>
      {/* 通过Provider传过来一个value值，是一个对象 */}
       <ThemContext.Provider value={{color:color}}>
          <button onClick={()=>setColor('pink')}>粉色</button>
          <button onClick={()=>setColor('blue')}>蓝色</button>
          <button onClick={()=>setColor('green')}>绿色</button>
          <Son></Son>
       </ThemContext.Provider>
    </div>
  )
}
// 子组件
function Son(props) {
  // 通过useContext获取父组件传过来的值
  const context=useContext(ThemContext)
  return (  
    <div>
      {/* 然后对他进行样式绑定 */}
      <h3 style={context}>hello,react</h3>
    </div>
  )
}
export default UseState

 //创建一个ref对象的内容
    let inp = useRef(null);
    const setVal =()=>{
        console.log(inp.current.value);
    }
   <input placeholder='输入内容' ref={inp} onChange={setVal}/>

function Home() {
    //定义一个初始化变量
    let inpRef = useRef(null);
    const getTheme = ()=>{
        console.log(inpRef);
    }
    return (
        <div>
             <input placeholder='输入内容'/>
             <button onClick={getTheme}>获取子组件对象</button>
             <hr />
             <Theme ref={inpRef}/>
        </div>
    )
}
const Theme = forwardRef(function(props,ref){
    return (
        <h3 ref={ref}>文字内容显示</h3>
    )
})

import { useEffect } from "react";
//自定义显示标题的Hooks的方法内容
const useTitle = (title) => {
    useEffect(() => {
        document.title = title;
        return ()=>{
            document.title="React 页面"
        }
    }, []);
    return;
}
export { useTitle };

import { useTitle } from "../context/hooksApi"
export default function My(){
    useTitle("个人中心")
    return (
        <div>
            <h3>个人中心</h3>
        </div>
    )
}