React技术栈

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素

增强代码重⽤性，提⾼开发效率

简化调试步骤，提升整个项⽬的可维护性

便于协同开发

降低耦合性

props从组件外部向内部传递的数据；组件内部只读不修改

React.createContext

Context.Provider

Context.Consumer

Class.contextType

useContext

创建Context => 获取Provider和Consumer => Provider提供值 => Consumer消费值

因为 context 会使⽤参考标识（reference identity）来决定何时进⾏渲染，这⾥可能会有⼀些陷阱，当
provider 的⽗组件进⾏重渲染时，可能会在 consumers 组件中触发意外的渲染。

为了防⽌这种情况，将 value 状态提升到⽗节点的 state ⾥

在React的官⽅⽂档中， Context 被归类为⾼级部分(Advanced)，属于React的⾼级API，建议不要滥⽤

整个应用的state被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象

为了描述 action 如何改变 state tree ，你需要编写 reducers

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，
随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分

react-redux — React

ng-redux — Angular

。。。

redux-thunk — 用最简单的方式搭建异步 action 构造器

redux-promise — 遵从 FSA 标准的 promise 中间件

redux-axios-middleware — 使用 axios HTTP 客户端获取数据的 Redux 中间件

redux-observable — Redux 的 RxJS 中间件

redux-logger — 记录所有 Redux action 和下一次 state 的日志

redux-saga — Redux 应用的另一种副作用 model

。。。

redux-simple-router — 保持 React Router 和 Redux 同步

redux-router — 由 React Router 绑定到 Redux 的库

redux-form — 在 Redux 中时时持有 React 表格的 state

react-redux-form — 在 React 中使用 Redux 生成表格

不要在reducer修改传入参数

不要在reducer执行有副作用的操作，如 API 请求和路由跳转

不要在reducer调用非纯函数，如 Date.now() 或 Math.random()

user（用户模块）

cart（购物车模块）

product（商品模块）

const reducers = combineReducers({user, cart, product})

Store 就是把action，reducer联系到一起的对象

维持应用的 state

提供 getState() 方法获取 state

提供 dispatch(action) 方法更新 state

通过 subscribe(listener) 注册监听器

通过 subscribe(listener) 返回的函数注销监听器

调用 store.dispatch(action)

Redux store 调用传入的 reducer 函数

根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树

Redux store 保存了根 reducer 返回的完整 state 树

npm install --save react-redux

描述如何展现（骨架、样式）

不直接使用 Redux

数据来源：props

数据修改：从 props 调用回调函数

调用方式：手动调用

描述如何运行（数据获取、状态更新）

直接使用 Redux

数据来源：监听 Redux state

数据修改：向 Redux 派发 actions

调用方式：通常由 React Redux 生成

调用reacr-redux中的connect()方法，把展示组件和 Redux 连接起来

在根组件通过react-redux的Provider组件统一注入Store

createStore() 所创建的 Redux store 没有使用 middleware，所以只支持 同步数据流

通过applyMiddleware()增强createStore()，方便描述异步action

React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数

只要使用了constructor()就必须写super(),否则会导致this指向错误

这个钩子用的相对较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法
比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染

render()是纯函数，不能在这个钩子函数中调用this.setState()，会有改变组件状态的副作用

return 一个React元素

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

在接受父组件改变后的props需要重新渲染组件时用到的比较多

接受一个参数nextProps

通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

主要用于性能优化(部分更新)

唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state
发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新

因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是
不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,
这里同样可以拿到nextProps和nextState

组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会
进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较
更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染

render()是纯函数，不能在这个钩子函数中调用this.setState()，会有改变组件状态的副作用<br>

return 一个React元素

在此处完成组件的卸载和数据的销毁

clear你在组建中所有的setTimeout,setInterval

移除所有组建中的监听 removeEventListener

const [state, setState] = useState(initialState);

返回一个 state，以及更新 state 的函数

一个React函数组件中可以多次调用useState

React 会确保 setState 函数的标识是稳定的，并且不会在组件重新渲染时发生变化

与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果

useReducer 是另一种可选方案，它更适合用于管理包含多个子值的 state 对象

useEffect(didUpdate)

该 Hook 接收一个包含命令式、且可能有副作用代码的函数

在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执
行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性

使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行

默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它 在只有某些值改变的时候才执行

通常，组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点，useEffect 函数需返回一个清除函数

为防止内存泄漏，清除函数会在组件卸载前执行。另外，如果组件多次渲染（通常如此），则在执行下一个 effect 之前，上一个 effect 就已被清除

与 componentDidMount、componentDidUpdate 不同的是，在浏览器完成布局与绘制之后，传给 useEffect 的函数会延迟调用。
这使得它适用于许多常见的副作用场景，比如设置订阅和事件处理等情况，因此不应在函数中执行阻塞浏览器更新屏幕的操作

然而，并非所有 effect 都可以被延迟执行。例如，在浏览器执行下一次绘制前，用户可见的 DOM 变更就必须同步执行，这样用户才不会感觉到视觉上的不一致。（概念上类似于被动监听事件和主动监听事件的区别。）React 为此提供了一个额外的 useLayoutEffect Hook 来处理这类 effect。它和 useEffect 的结构相同，区别只是调用时机不同

虽然 useEffect 会在浏览器绘制后延迟执行，但会保证在任何新的渲染前执行。React 将在组件更新前刷新上一轮渲染的 effect

默认情况下，effect 会在每轮组件渲染完成后执行。这样的话，一旦 effect 的依赖发生变化，它就会被重新创建

可以给 useEffect 传递第二个参数，它是 effect 所依赖的值数组

如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行

如果你传入了一个空数组（[]），effect 内部的 props 和 state 就会一直持有其初始值。尽管传入 [] 作为第二个参数有点类似于 componentDidMount 和
componentWillUnmount 的思维模式，但我们有 更好的 方式 来避免过于频繁的重复调用 effect。除此之外，请记得 React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect，因此会使得处理额外操作很方便

const value = useContext(MyContext);

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的
context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定

别忘记 useContext 的参数必须是 context 对象本身

调用了 useContext 的组件总会在 context 值变化时重新渲染

useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>

useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。
你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context

const [state, dispatch] = useReducer(reducer, initialArg, init);

作为useState的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的dispatch方法

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。
并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数

有两种不同初始化 useReducer state 的方式，你可以根据使用场景选择其中的一种。将初始 state 作为第二个参数传入 useReducer 是最简单的方法

你可以选择惰性地创建初始 state。为此，需要将 init 函数作为 useReducer 的第三个参数传入，这样初始 state 将被设置为 init(initialArg)

React 会确保 dispatch 函数的标识是稳定的，并且不会在组件重新渲染时改变

React 不使用 state = initialState 这一由 Redux 推广开来的参数约定。有时候初始值依赖于 props，因此需要在调用 Hook 时指定

返回一个 memoized 回调函数

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

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新

依赖项数组不会作为参数传给回调函数。虽然从概念上来说它表现为：所有回调函数中引用的值都应该出现在依赖项数组中

返回一个memoized值

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。
这种优化有助于避免在每次渲染时都进行高开销的计算

记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，
诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值

你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证

依赖项数组不会作为参数传给“创建”函数。虽然从概念上来说它表现为：所有“创建”函数中引用的值都应该出现在依赖项数组中

const refContainer = useRef(initialValue);

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取
DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新

如果你正在将代码从 class 组件迁移到使用 Hook 的函数组件，则需要注意 useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的。但是，我们推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect

什么是JSX

为什么需要JSX

原理

与vue的异同

核心api