react 学习笔记

React.Memo为高阶组件。
如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。
function Component(){
}
function equal(prevProps, nextProps){
如果相等则返回true，否则返回false，和shouldComponentUpdate返回值情况相反，
}
React.Memo(Component,equal)，如果第二个参数不传参那就默认进行浅比较。

React.lazy 不支持服务端渲染，如果需支持服务端渲染就需用使用这个库，作用延迟加载组件，达到不会以其他组件同时进行加载，先加载其他组件通过Suspense fallback属性可以先定义显示loading
Loadable Components
React.lazy接收一个函数。
const OtherComponent = React.lazy(() => import(’./OtherComponent’));

需要结合Suspense组件一起使用
文档api 内容，分异常捕获边界，基于路由的代码分割，基本使用demo。
https://zh-hans.reactjs.org/docs/code-splitting.html#reactlazy

useMemo 会在渲染期间执行。

function compute(a,b){}
const memonizaVallue =useMemo(()=>compute(a,b),[a,b])
返回一个 memoized 值。

先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。

useCallback 用法和useMemo一样，但返回值不一样是一个 memoized 回调函数。

const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);

redux 中间件redux-saga redux-thunk(github README.md可以看到文档)
Why Do I Need This?

With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extends the store’s abilities, and lets you write async logic that interacts with the store.

Thunks are the recommended middleware for basic Redux side effects logic, including complex synchronous logic that needs access to the store, and simple async logic like AJAX requests.

使用普通的基本Redux存储，您只能通过调度操作来执行简单的同步更新。 中间件扩展了store的功能，并允许您编写与store交互的异步逻辑。

react-redux 可以看博主的另一篇关于react-redux的学习笔记文章 链接: link.

context
类组件使用
React.createContext
const MyContext = React.createContext(defaultValue);
Context.Provider
<MyContext.Provider value={/* 某个值 /}>
value可以是动态的当绑定state值时然后context也是动态了。
Context.Consumer
类组件会订阅context的改变函数组件就需使用这个
<MyContext.Consumer>
{value =>
()
/ 基于 context 值进行渲染的函数组件*/ }
</MyContext.Consumer>

useContext的参数是以刚才通过React.createContext所赋值的变量为参数，例子也就是MyContext