m0_52942098的博客

目录Redux概述Redux三大核心Redux组成State状态Action事件ReducerStore流程React-reduxProviderconnect流程 Redux概述 Redux是一个用于JavaScript状态容器，提供可预测化的状态管理。 Redux可以构建一致化的应用，运行于不同的环境并且易于测试。 Redux三大核心 单一数据源 整个应用的state被存储在一个object tree中，并且这个object tree只存在于唯一一个store中。 State是只读的 唯一改变

目录React路由概述路由的基本使用基本使用常用组件路由的执行过程编程式导航默认路由匹配模式模糊匹配精确匹配 React路由概述 现在的前端应用大多都是SPA（单页应用程序），也就是只有一个HTML页面的应用程序，因为它的用户体验更好，对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。 前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。 前端路由是一套映射规则，在React中，是URL路径和组件的对应关系。 使用React路由来说，就是配置路径

目录React事件处理事件绑定事件对象事件绑定this指向箭头函数bind()绑定class的实例方法事件处理中的参数传递 React事件处理 事件绑定 React事件绑定语法与DOM事件语法相似。 语法：on+事件名称={事件处理程序}，比如onClick={()=> {}}。 React事件采用驼峰命名法。 小驼峰命名：第一个单词小写，后面的单词首字母大写，事件名后不能带()，带上会直接执行 class App extends React.Component { handle() {

目录类组件与函数组件React Hooks中常用的钩子函数useState()useContext()useReducer()useEffect() 类组件与函数组件 React创建组件的方式有类组件和函数组件。 函数组件： 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没有this 类组件功能齐全，但是代码很重，组件不够轻便。若使用函数组件，又没有状态管理。于是React团队设计了React Hooks，它的本质是增强的函数组件，即在函数组件中实现状态管理。 React Hooks中常用的钩子

目录React组件的生命周期创建时（挂载阶段）更新时（更新阶段）卸载时（卸载阶段）不常用的钩子函数 React组件的生命周期 意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等。 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。 生命周期的每个阶段总是伴随着一些方法的调用，这些方法就是生命周期的钩子函数。 钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。 只有类组件才有生命周期。 创建时（挂载阶段） 执行时机：组件创建时（页面加载时）。

目录React的三大属性props属性组件通讯父传子子传父兄弟组件通讯Contextchildren属性props校验props的默认值state属性refs属性 React的三大属性 props属性 组件是封闭的，默认情况下，只能使用组件自己的数据，要接收外部数据应该通过props来实现。 props的作用：接收传递给组件的数据。 传递数据：给组件标签添加属性。 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据。 特点： 可以给组件传递任意类型的数据 props是只读

目录React概述React的开发过程React的虚拟DOMJSX简介 React概述 React是一个用于构建用户界面的JavaScript库，用来简化可视化界面的开发。 React主要用来写HTML页面，或构建Web应用。 它是基于JSX(JavaScript Xml)语法，可以和html、js混合书写。 核心是组件，可以实现用户界面的模块化开发，代码的复用率高、可维护性好。 React的开发过程 导入js文件 <script src="../js/react.development.js"&