# React Hooks详解

const DemoState = (props) => {
   /* number为此时state读取值 ，setNumber为派发更新的函数 */
   let [number, setNumber] = useState(0) /* 0为初始值 */
   return (<div>
       <span>{ number }</span>
       <button onClick={ ()=> {
         setNumber(number+1) // 会在下次渲染才更新number便令
         console.log(number) /* 这里的number是 旧值 */
       } } ></button>
   </div>)
}

function Index(){
  const [ number, setNumber ] = React.useState(0)
  const handleClick = () => setInterval(()=>{
    setNumber(number + 1 ) // // 此时 number 一直都是 0
  },1000)
  return <button onClick={ handleClick } > 点击 { number }</button>
}

let account =5;
export default function Index(){
  const [ state  , dispatchState ] = useState({ name:'alien' })
  const  handleClick = ()=>{ // 点击按钮，视图没有更新。
    state.name = 'Alien';
    dispatchState(state) // state变量是对象，存储的是对象地址，这么操作直接等于内存地址重新赋值了相同的值。而传入相同的state值，组件不会渲染，所以视图没有更新。但是对象内的属性已经修改成功了
  }
  return (<div>
    <span>{state.name}</span>
    <button onClick={handleClick}>changeName++</button>
  </div>);
}

import { useReducer } from 'react';
const [ ①state , ②dispatch ] = useReducer(③reducer, initialState, processInitState)

function Index({ dispatch, State }) {
  return (
    <button onClick={() => { dispatch({ name: 'reset', payload: 666 }); }}>子 重置 {State.number}</button>
  );
}
const DemoUseReducer = ({size}) => {
  /* number为更新后的state值,  dispatchNumber 为当前的派发函数 */
  const [number, dispatchNumber] = useReducer((state, action) => {
    const { payload, name } = action;
    switch (name) { // /* return的值为新的state */
      case 'add':
        return state + 1;
      case 'sub':
        return state - 1;
      case 'reset':
        return payload;
      default:
        return 50;
    }
  }, 10, (initialState ) => {return initialState * size});
  return (
    <div>
      当前值：{number}
      <button onClick={() => dispatchNumber({ name: 'add' })}>增加</button>
      <button onClick={() => dispatchNumber({ name: 'sub' })}>减少</button>
      {/* 把dispatch 和 state 传递给子组件  */}
      <Index dispatch={dispatchNumber} State={{ number }} />
    </div>
  );
};
export default DemoUseReducer;

import { useSyncExternalStore } from 'react';
useSyncExternalStore( subscribe, getSnapshot, getServerSnapshot)

import { combineReducers , createStore  } from 'redux'

/* number Reducer */
function numberReducer(state=1,action){
    switch (action.type){
      case 'ADD':
        return state + 1
      case 'DEL':
        return state - 1
      default:
        return state
    }
}
/* 注册reducer */
const rootReducer = combineReducers({ number:numberReducer  })
/* 创建 store */
const store = createStore(rootReducer,{ number:1  })

function Index(){
    /* 订阅外部数据源 */
    const state = useSyncExternalStore(store.subscribe,() => store.getState().number)
    console.log(state)
    return <div>
        {state}
        <button onClick={() => store.dispatch({ type:'ADD' })} >点击</button>
    </div>
}

import { useTransition } from 'react' 
const  [ isPending , startTransition ] = useTransition ()

/* 模拟数据 */
const mockList1 = new Array(10000).fill('tab1').map((item,index)=>item+'--'+index )
const mockList2 = new Array(10000).fill('tab2').map((item,index)=>item+'--'+index )
const mockList3 = new Array(10000).fill('tab3').map((item,index)=>item+'--'+index )

const tab = { tab1: mockList1, tab2: mockList2, tab3: mockList3 }

export default function Index(){
  const [ active, setActive ] = React.useState('tab1') //需要立即响应的任务，立即更新任务
  const [ renderData, setRenderData ] = React.useState(tab[active]) //不需要立即响应的任务，过渡任务
  const [ isPending,startTransition  ] = React.useTransition() 
  const handleChangeTab = (activeItem) => {
     setActive(activeItem) // 立即更新
     startTransition(()=>{ // startTransition 里面的任务优先级低
       setRenderData(tab[activeItem])
     })
  }
  return <div>
    <div className='tab' >
       { Object.keys(tab).map((item)=> <span className={ active === item && 'active' } onClick={()=>handleChangeTab(item)} >{ item }</span> ) }
    </div>
    <ul className='content' >
       { isPending && <div> loading... </div> }
       { renderData.map(item=> <li key={item} >{item}</li>) }
    </ul>
  </div>
}

import { useDeferredValue } from 'react';
const [value, setValue] = useState('');
const deferrredValue = React.useDeferredValue(value, initialValue?)

import React from "react"
const tab = { tab1: ['1','2','3'], tab2: ['4','5','6'], tab3: ['7','8','9'] }
export default function Index(){
  const [ active, setActive ] = React.useState('tab1') //需要立即响应的任务，立即更新任务
  const deferActive = React.useDeferredValue(active) // 把状态延时更新，类似于过渡任务
  const handleChangeTab = (activeItem) => {
     setActive(activeItem) // 立即更新
  }
  const renderData = tab[deferActive] // 使用滞后状态
  return <div>
    <div className='tab' >
       { Object.keys(tab).map((item)=> <span className={ active === item && 'active' } onClick={()=>handleChangeTab(item)} >{ item }</span> ) }
    </div>
    <ul className='content' >
       { renderData.map(item=> <li key={item} >{item}</li>) }
    </ul>
  </div>
}
// 如上 active 为正常改变的状态，deferActive 为滞后的 active 状态，我们使用正常状态去改变 tab 的 active 状态，使用滞后的状态去更新视图，同样达到了提升用户体验的作用。

import React, { memo, useState, useDeferredValue } from 'react';

const SlowList = memo(function SlowList({ text }) {
  // 仅打印一次。实际的减速是在 SlowItem 组件内部。
  console.log('[ARTIFICIALLY SLOW] Rendering 250 <SlowItem />');
  let items = [];
  for (let i = 0; i < 250; i++) {
    items.push(<SlowItem key={i} text={text} />);
  }
  return ( <ul className="items"> {items} </ul> );
});
function SlowItem({ text }) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // 每个 item 暂停 1ms，模拟极其缓慢的代码
  }
  return (<li className="item">Text: {text}</li>)
}

export default function App() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={deferredText} />
    </>
  );
}
// 在这个例子中，SlowList 组件中的每个 item 都被 故意减缓了渲染速度，这样你就可以看到 useDeferredValue 是如何让输入保持响应的。当你在输入框中输入时，你会发现输入很灵敏，而列表的更新会稍有延迟。
// 例子链接：https://zh-hans.react.dev/reference/react/useDeferredValue#examples

import React from 'react';
let h = 30;
function Index() {
  const [count, setCount] = React.useState(100)
  const divRef = React.useRef(null);
  // 用来测试 三个副作用方法 的执行顺序，把flag变量值改成对应的值即可
  const print = (name) => {
    // console.log(`${name}`);
    const flag = 'useInsertionEffect';
    if (divRef.current) {
      if (flag === name) {
        // h += 10; divRef.current.innerText = h;                // 1、修改dom
        if (count === 0) { setCount(Math.random() + 99); } // 2、修改状态
      }
      console.log(`${name}`, count, divRef.current.innerText);
    }
  };
  React.useEffect(() => {
    print('useEffect');
  });
  React.useLayoutEffect(() => {
    print('useLayoutEffect');
  });
  React.useInsertionEffect(() => {
    print('useInsertionEffect');
  });
  // console.log('函数组件体,', count);
  if (divRef.current) {
    console.log('函数组件体', count, divRef.current.innerText);
  }
  return (<div className="hook-test">
    <div ref={divRef} style={{ border: '1px solid' }}>This is</div>
    <h4>count: {count}</h4>
    {/* 1、修改dom：<button onClick={e => setCount(count + 1)}>count</button> */}
    2、修改状态：<button onClick={e => setCount(0)}>count</button>
  </div>);
}
export default Index;
// 函数组件渲染步骤：
// 1. 函数组件执行，返回了 经过处理逻辑的的dom
// 2. useInsertionEffect 执行
// 3. useLayoutEffect 执行
// 4. 经过修改的dom渲染到浏览器中。
// 5. useEffect 执行，这次渲染结束

import { useEffect } from 'react';
useEffect(setup, dependencies?);

// 真正使用的时候是这种形式的
useEffect(() => {
  // 执行副作用操作
  return () => {}; // 清理操作执行方法，可选
}, [dependencies]); // 依赖数组

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

function getUserInfo(a){ // 模拟数据交互
  return new Promise((resolve)=>{
      setTimeout(()=>{ resolve({ name:a, age:16, }) }, 500)
  })
}
const Demo = ({ a }) => {
  const [ userMessage , setUserMessage ] :any= useState({})
  const div= useRef()
  const [number, setNumber] = useState(0)
  const handleResize =()=>{}    // 模拟事件监听处理函数
  useEffect(()=>{
     // 请求数据
     getUserInfo(a).then(res=>{ setUserMessage(res) })
     const timer = setInterval(()=>console.log(666),1000)
     window.addEventListener('resize', handleResize) // 事件监听
     return function(){ // 此函数用于清除副作用
         clearInterval(timer) 
         window.removeEventListener('resize', handleResize)
     }
  // 只有当 a 和 number 改变的时候,useEffect 函数才会重新执行
  },[ a ,number ]) // 这里如果不加限制 ，会是函数重复执行，陷入死循环
  useEffect(() => {
    console.log('useEffect1111 只执行一次');
  }, []); // 数组为空[],只在初始挂载后执行一次，相当于componentDidMount方法
  return (<div ref={div} >
      <span>{ userMessage.name }</span> <span>{ userMessage.age }</span>
      <div onClick={ ()=> setNumber(1) } >{ number }</div>
  </div>)
}

import React from 'react';
let h = 30;
function Index() {
  const [count, setCount] = React.useState(100)
  const divRef = React.useRef(null);
  React.useLayoutEffect(() => {
    h += 10; divRef.current.innerText = h;
  });
  return (<div className="hook-test">
    <div ref={divRef} style={{ border: '1px solid' }}>This is</div>
    <h4>count: {count}</h4>
    修改dom：<button onClick={e => setCount(count + 1)}>count</button>
  </div>);
}
export default Index;

export default function Index(){
  React.useInsertionEffect(()=>{
    /* 动态创建 style 标签插入到 head 中 */
    const style = document.createElement('style')
    style.innerHTML = `
       .css-in-js{
         color: red;
         font-size: 20px;
       }
     `
    document.head.appendChild(style)
  },[])
  return <div className="css-in-js" > hello , useInsertionEffect </div>
}

// contextTest.js：定义一个context 文件，所有用到这个context的组件都要引用这个文件
export const UserContext = React.createContext();

// 共同的父组件发布变量
import { UserContext } from '@views/contextTest.js'; // 引入共同的 Context
const App = () => (
  const [age, setAge] = React.useState(256); // 让子组件可以修改 Context
  <UserContext.Provider value={{ name: 'Alice', age: age, setAge: setAge }}>
    <UserInfo />
  </UserContext.Provider>
);

// 函数组件使用变量：1、通过useContext使用。
import { useContext } from 'react';
import { UserContext } from '@views/contextTest.js'; // 引入共同的 Context
export default function UserInfo() {
  const user = useContext(UserContext); // 1、通过useContext获取变量
  return (<div>
    <p>用户名: {user.name}</p> <p>年龄: {user.age}</p>
    <button onClick={() => { user.setAge(user.age + 1); }}>增加年龄</button>
  </div>);
}

const ref = React.useRef(initialValue);

import React from 'react';
let text = 30;
function Counter() {
  const ref = React.useRef(0);       // 保存变量，组件在变量在，修改不触发更新
  const divRef = React.useRef(null); // 保存dom。
  React.useEffect(() => { console.log('useEffect'); }); // 只执行了一次
  function handleClick() {
    ref.current += 1;
    console.log('ref.current:', ref.current);
    text += 10; divRef.current.innerText = `dom修改${text}`;   
  }
  return (<div>
    <div ref={divRef}>This is</div>
    <button onClick={handleClick}>点击</button>
  </div>);
}

React.useImperativeHandle(ref, createHandle, dependencies?)

import React from 'react';
// 父组件
const Parent = () => {
  const ChildRef = React.createRef(); // React.useRef() 也一样
  return (
    <div>
      <button onClick={() => { ChildRef.current.func(); }}>click</button>
      <Child ref={ChildRef} />
    </div>
  );
};
// 子组件：和 forwardRef 方法配合 暴露自定义的 ref 对象给父组件
const Child = React.forwardRef((props, ref) => {
  const [count, setCount] = React.useState(100);
  React.useImperativeHandle(ref, () => ({
    func: () => {
      setCount(count + 1);
      console.log('我是子组件1，count：', count);
    },
  }));
  return <div>子组件</div>;
});
// 子组件：父组件使用<Child onRef={ChildRef} /> 这种自定义props属性来获取函数组件的自定义 ref 对象
const Child = (props) => {
  const [count, setCount] = React.useState(100);
  React.useImperativeHandle(props.onRef, () => ({
    func: () => {
      setCount(count + 1);
      console.log('我是子组件，count：', count);
    },
  }));
  return <div>子组件</div>;
};

const Child = React.forwardRef((props, ref) => {
  const [count, setCount] = React.useState(10);
  React.useImperativeHandle(ref, () => ({
    func: () => {
      setCount(count + 1);
      console.log('我是子组件1，count：', count);
    },
  }), []);
  return <div>子组件：{count}</div>;
});
// 父组件执行 func 方法，console.log里面的count值永远是10， 页面count值只有在第一次点击后变成了11，后面的点击都没变化

const visible = React.useMemo(calculate, deps)

function Scope() {
  const keeper = useKeep()
  const { cacheDispatch, cacheList, hasAliveStatus } = keeper
  const contextValue = useMemo(() => { /* 通过 useMemo 得到派生出来的新状态 contextValue  */
    return {
      hasAliveStatus: hasAliveStatus.bind(keeper),
      cacheDestory: (payload) => cacheDispatch.call(keeper, { type: ACTION_DESTORY, payload })
    }
  }, [keeper])
  return <KeepaliveContext.Provider value={contextValue}></KeepaliveContext.Provider>
}

function ChatRoom({ roomId }) {
  const options = { serverUrl: 'https://localhost:1234', roomId: roomId };
  useEffect(() => {
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [options]);
}
// 1. 上面代码中，因为 Effect 中的每一个响应式值都应该声明为其依赖。 然而如果你将 options 声明为依赖，会导致在 Effect 在每次渲染后都会重新执行
// 2. 为了解决这个场景，你可以使用 useMemo 将 Effect 中使用的对象包装起来
const options = useMemo(() => {
  return { serverUrl: 'https://localhost:1234', roomId: roomId };
}, [roomId]); // ✅ 只有当 roomId 改变时才会被改变
// 3. 然而，因为 useMemo 只是一个性能优化手段，而并不是语义上的保证，所以 React 在 特定场景下 会丢弃缓存值。这也会导致重新触发 Effect，因此 最好通过将对象移动到 Effect 内部来消除对函数的依赖：
useEffect(() => {
  // ✅ 不需要将 useMemo 或对象作为依赖！
  const options = {  serverUrl: 'https://localhost:1234', roomId: roomId }
  const connection = createConnection(options);
  connection.connect();
  return () => connection.disconnect();
}, [roomId]); // ✅ 只有当 roomId 改变时才会被改变

export default function ProductPage({ productId, referrer }) {
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', { referrer, orderDetails });
  }
  // 使用 useMemo 记忆 handleSubmit 函数
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', { referrer, orderDetails });
    };
  }, [productId, referrer]);
  return <Form onSubmit={handleSubmit} />;
}

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');
// 使用 useMemo 测试
console.time('filter array useMemo');
const visibleTodos = useMemo(() => { return filterTodos(todos, tab);  }, [todos, tab]);
console.timeEnd('filter array useMemo');

const cachedFn = React.useCallback(fn, deps)
// useCallback 等于 如下实现，或者 const cachedFn = useMemo(() => fn, dependencies)
function myUseCallback(fn, dependencies) {
  return useMemo(() => fn, dependencies); 
}

/* 用react.memo */
const DemoChildren = React.memo((props)=>{
  /* 只有初始化的时候打印了 子组件更新 */
  console.log('子组件更新')
  useEffect(()=>{ props.getInfo('子组件') },[])
  return <div>子组件</div>
})
const DemoUseCallback=({ id })=>{
  const [number, setNumber] = useState(1)
  const getInfo  = useCallback((sonName)=>{ console.log(sonName) },[id])
  return <div>
    {/* 点击按钮触发父组件更新 ，但是子组件没有更新 */}
    <button onClick={ ()=>setNumber(number+1) } >增加</button>
    <DemoChildren getInfo={getInfo} />
  </div>
}

useDebugValue(value, date => date.toDateString());

function useTestDebug(data) {
  // const [age, setAge] = React.useState(11);
  React.useDebugValue(data);
  return data;
}
function MyApp() {
  const [count, setCount] = React.useState(10);
  useTestDebug(count);
  return (<div>
    <button onClick={() => { setCount(count + 1); }}>add count</button>
    count: {count}
  </div>);
}

const rid = Math.random() + '_id_'  /* 生成一个随机id  */
function Demo (){
   return <div id={rid} ></div> // 使用 rid 
}

function Demo (){
   const rid = useId() // 生成稳定的 id 
   return <div id={rid} ></div>
}

let id = 0
function makeId(){
  return id++
}
function Demo(){
  const id = useRef( makeId() )
  return <div id={id}  >...</div>
}

function FunComponent(props) {
    if (props.condition) {
        useEffect()
    }
    const [counter, setCounter] = useState(0)
    const memo = useMemo()
}