React-Hoos学习

一、Hook 的含义
Hook 这个单词的意思是"钩子"。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。

你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

Diff算法

** 设计**

• 在某个实际组件会调用render生成DOM树，当state或者props变化的时候会通过render生成另一颗DOM树
• diff就是在对新旧两颗DOM进行一个比较，以最小的开销比较差异，拆卸和替换需要更新的虚拟DOM，最终生成真实的DOM树，保证渲染的UI的是最新的更新

下面介绍 React 默认提供的四个最常用的钩子。

 - useState()
 - useEffect()
 - useContext
 - useReducer()
 - useMemo() 
 -  useCallback
 - useRef()

理解：
1.useState就是定义一个变量const [count,setCount]=useState(0)
useState有两种更新状态的方式： 1）直接更新：useState(count+1) 2）函数式更新(需要依赖上一次的状态)：useState(preState=>{ return preState+=1 })

2.useEffect相当于类组件中的（componentDidmount/componentDidUpdata/componentWillUnmount）
1.按照执行的顺序执行
2.默认情况下useEffect是在浏览器渲染完成后延迟调用，但是如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 -----effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可。
3.可以在useEffect中使用函数

	useEffect(()=>{
		xxxx
		return xxxx //需要清除的逻辑代码
	},[ ])
	
	
	function Example({ someProp }) {
	  useEffect(() => {
	    function doSomething() {
	      console.log(someProp);
	    }
	
	    doSomething();
	  }, [someProp]); // ✅ 安全（我们的 effect 仅用到了 `someProp`）
	}

3.useContext相当于Connect

4.useReducer相当于redux中的reducer

5.useMemo 有两个参数：
1.第一个参数是个函数，返回的对象指向同一个引用，不会创建新的对象
2.第二个参数是一个数组，相当于参数监视，只有当里面的数值发生变化的时候，第一个函数的返回对象才是一个新的对象

6.useCallback=>用法和useMemo/useEffect差不多
.在父子嵌套组合当中做优化使用，可以防止没有调用父组件的方法，而造成子组件刷新

7.useRef：相当于createRef()，一个储存容器

问题一：
1.组件间数据传递？

1.props
2.回调函数
3.createContext和useContext(context)
4.pubsub（发布订阅）