妍思码匠的博客

redux分别定义state状态和reducer函数，reducer函数接收当前的state和action对象。// 定义初始状态count: 0,// 编写reducer函数default:RTK利用createSlice切片来简化action和reducer的创建，在createSlice中定义reducers对象，每个键值对代表一个action类型和对应的reducer函数。一个createSlice切片可以理解为一个业务模块。// 引入创建slice切片的函数。

中间件：中间件都是用来简化redux的开发，他存在于action和store中间，是对于dispatch方法的包装。例如redux-thunk。Redux核心包：redux是一个非常小的库，他的的核心包只有一些基础的API，例如创建一个redux的存储实例（）、合并多个reducer、合并多个中间件等。这意味着其他的相关逻辑都需要自己编码实现。Redux-thunk中间件：简化redux开发。改造store.dispatch，主要实现了异步请求的支持。

Effect可以理解为暂时跳出React代码，并与外部系统进行同步的一种机制，例如浏览器API、下载文件、网络、第三方插件等。他在每次渲染后执行。

解释：使用第1步创建的Context值LevelContext.Provider来包裹所有的子组件，这样<Section>组件中的任何子组件请求LevelContext时，都。useContext是props传参的另一种用法，他避免了深层嵌套的props和多个相同组件使用的冗余props。父组件和多个子组件都要分别传入相同的props“level”，而使用useContext可以解决这种代码冗余。使用Context Provider包裹他所有的子组件，并提供Context。传递的value值level。

const [user, setUser] = useState( {id: '123', name: '张三'} );如上方示例，在react引用state时，无论state的值是什么类型，都要将存在state的js值视为只读的， 也就是不允许修改，如果直接修改了state的值（例如user.name = '李四'），这个操作就制造了一个mutation。在react使用state时，要遵循state的值是不可变的原则！

定义组件时，应尽量保持组件功能的单一性，也就是一个组件只做一件事。

从以上概念可知，react组件就是一部分的js逻辑，封装的独立的可复用的代码片段，这样每个片段都可以进行独立的管理，很好的实现了代码的复用。react的核心是封装一个个大大小小的组件（小到一个按钮，大到一个页面）来构建复杂的UI界面，每个组件都是UI的一部分。函数式组件其实就是官网的标准案例，定义一个函数，接受任意的props参数，函数中返回jsx语法的页面UI内容。class组件不同于函数组件的是，class组件会创建对应的实例，因此。，该函数的返回值是JSX语法编写的React元素。