[react]react Hooks 总结

• 避免地狱式嵌套，可读性提高。
• 函数式组件，比 class 更容易理解。

• class 组件生命周期太多太复杂，使函数组件存在状态。
• 解决 HOC 和 Render Props 的缺点。

• UI 和 逻辑更容易分离。

• 只能在「函数最顶层」调用 Hook，不要在循环、条件判断或者子函数中调用；
• 只能在 「React 的函数组件」中调用 Hook，不能是普通函数 也不能是 class 组件。

// 使用 Hook 的函数组件
import { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}> Click me </button>
    </div>
  );
}
// 等价的 class 组件
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

import { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}> Click me </button>
    </div>
  );
}

useEffect(() => {
  console.log('订阅一些事件')
  return () => { // 组件卸载后执行 返回的函数
    console.log('取消订阅')
  }
})

• 没有传入该参数时，默认在每次 render 时都会重新执行回调；
• 传递一个 []，只有在组件初始化或销毁的时候才会触发；

• 传入 [source] ，在依赖 state 发生改变时, 才重新执行该回调。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

function Post({ id, unlisted }) {
  useEffect(() => {
    fetch(`/posts/${id}`).then( )
  }, [id])
  useEffect(() => {
    setVisibility(unlisted)
  }, [unlisted])
}

// 如
const getDep = () => {
  return {
    foo: 'bar',
  };
};
useEffect(() => {
  // 无限循环了
}, [getDep()]);
// 解决方案：把依赖转为字符串
const getDep = () => {
  return {
    foo: 'bar',
  };
};
const dep = JSON.stringify(getDeps());
useEffect(() => {
  // ok!
}, [dep]);
// 最好还是用社区提供的方案：useDeepCompareEffect，它选用深比较策略

const [count, setCount] = useState(0);
useEffect(() => { // 会有闪烁
  console.log(`useEffect - count=${count}`)
  // 耗时的操作
  const pre = Date.now();
  while(Date.now() - pre < 1000) {}
  // count为 0 时重新生成个随机数
  if (count === 0) {    
    setCount(10 + Math.random() * 200);
  }
}, [count]);
useLayoutEffect(() => { // 不会有闪烁，但是会卡一下
  console.log(`useLayoutEffect - count=${count}`)
  const pre = Date.now();
  while(Date.now() - pre < 1000) {}
  if (count === 0) {    
    setCount(10 + Math.random() * 200);
  }
}, [count]);
<div onClick={() => setCount(0)}>{count}</div>

import React, { useRef, useEffect } from 'react'
const HooksComponent = () => { 
  const inputRef = useRef(null);
  useEffect(() => {
    console.log(inputRef.current.value);
  }, [])
  return <input ref={inputRef} />
}

• 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )。
• 返回的 ref 对象在组件的整个生命周期内保持不变
• 当更新 current 值时并不会 re-render ，这是与 useState 不同的地方
• 更新 useRef 是 side effect (副作用)，所以一般写在 useEffect 或 event handler 里
• useRef 类似于类组件的 this

const Foo = forwardRef((params) => {
   const inputRef = useRef();
   const onclick= (params) => {inputRef.current.focus();}
   return (
     <div>
     <input type="text" ref={inputRef }/>
     <button onClick={onclick}>聚焦</button></div>
  )
)

const App= (params） =>{
const inputRef= useRef();
const onclick = (params） =>{
console.log(inputRef.current);
retun (
<div>
<Foo ref= {inputRef} />
<button onclick={onclick}>父组件</button></div>
)

export default function App() {
const hello = useRef(null)
const handler = ()=>{//拿到hello内部的方法
hello.current.add()
}
return (
   <div>
    <Button onclick={ handler}>触发Hello组件中的方法</Button>
    <Hello ref={hello}/>
   </div>
  )
}