react的简单学习

适用场景：多交互、多数据源
设计思想：视图与状态一一对应，所有状态保存在一个对象里面
1.store：保存数据的容器，返回新生成的store对象

import { createStore } from 'redux';
const store =createStore(reducer, [initialState], enhancer)

reducer(function)两个参数当前state和要处理的action
[initialState]（any）初始state
enhancer（function）store 的高阶函数，可以指定为 第三方的中间件，时间旅行，持久化 等等，但是这个函数只能用 Redux 提供的 applyMiddleware 函数来生成
2.action：state变化导致view变化，用户接触不到state，只能通过view，action是view发出的通知

const action = {//action为对象
  type: 'ADD_TODO',//action名称
  payload: 'Learn Redux'//携带的字符串
};

通过Action Creator定义一个函数生成action，通过store.dispatch发出action
3.Reducer store收到action后必须返回一个新的state，view才会变化。state计算的过程叫reducer
4.Suspense懒加载

<Suspense fallback={TotalPointsMask}>

fallback作用是懒加载组件里的内容没渲染出来就渲染fallback里的元素,所以{TotalPointsMask}是标签
组件间传值通过下面这种方式

 <Suspense fallback={ProductListMask}>
       <ProductList list={item.pointProductHomeVOList} operation={jumpPage} />
</Suspense>

子组件通过const { list, operation } = props获取

5.connect从ui组件生成容器组件，将这两种组件连起来
两个参数：mapStateToProps和mapDispatchToProps。
mapStateToProps：将state映射到 UI 组件的参数（props）是一个函数，定义了哪些用户的操作应该当作 Action，传给 Store。可以是函数或者对象

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

todos属性是ui组件的同名参数
mapDispatchToProps：将用户对 UI 组件的操作映射成 Action。
6.useMemo和useCallback
1.useMemo 计算结果是 return 回来的值, 主要用于 缓存计算结果的值 ，应用场景如： 需要 计算的状态
2.useCallback 计算结果是 函数, 主要用于 缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。