weixin_45559449的博客

在实际开发中，如果用户刷新了网页，那么我们通过 redux 存储的全局数据就会丢失，比如登录信息。可以通过 localStorage 将信息存储到本地，需要自己添加逻辑（了解）。在入口文件中使用 PersistGate 包裹根组件，这将延迟渲染 app 视图直到持久化状态取回并保存到 redux 中。是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式。将 store 提供给应用程序，persistor对象提供给根组件。

了解React Router 以三个不同的包发布到 npm 上，它们分别为1、react-router：路由的核心库，提供了很多的组件、钩子。2、react-router-dom：包含 react-router 所有内容，并添加一些专门用于 DOM 的组件，例如等。3、react-router-native：包括 react-router 所有内容，并添加一些专门用于 ReactNative 的API，例如等。与 React Router 5.x 版本相比，改变了什么？1、内置组件的变化：移除。

对象式的 setState 是函数式的 setState 的简写方式（语法糖）使用原则：（1）如果新状态不依赖于原状态 ===> 使用对象方式（2）如果新状态依赖于原状态 ===> 使用函数方式（3）如果需要在 setState() 执行后获取最新的状态数据，要在第二个 callback 函数中读取。

redux 是一个专门用于做状态管理的 JS 库(不是 react 插件库)。它可以用在 react，angular，vue等项目中，但基本与react配合使用。集中式管理 react 应用中多个组件共享的状态。react-redux 一个 react 插件库，专门用来简化 react 应用中使用 redux。

依赖于浏览器history对象，清理浏览器缓存后，this.props.location.state 为 null，书写代码时需要做兼容处理。标签体内容（组件标签）是一个特殊的标签属性，通过 this.props.children 可以获取标签体内容。一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到 Redirect 指定的路由。默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）public/index.html 中 引入样式时不写 ./ 写 / （常用）

React 项目启动以后，运行到本地 3000 端口，地址为 http://localhost:3000请求 api 接口，接口地址为 http://localhost:5000/students | http://localhost:5001/cars浏览器发起 ajax 请求时，会存在跨域问题。

xxx 脚手架：用来帮助程序员快速创建一个基于 xxx 库的模板项目1、包含了所有需要的配置（语法检查、jsx 编译、devServer…）2、下载好了所有相关的依赖3、可以直接运行一个简单效果。

如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。key 是虚拟 DOM 对象的标识，在更新显示时 key 起着极其重要的作用，提高渲染效率，防止渲染错误。1、最好使用每条数据的唯一标识作为 key , 比如 id、手机号、身份证号、学号等唯一值。若对数据进行，逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实 DOM 更新。当状态中的数据发生变化时，React 会根据【新数据】生成【新的虚拟DOM】key的内部原理是什么？

组件从创建到死亡它会经历一些特定的阶段。React 组件中包含一系列勾子函数（生命周期回调函数 生命周期钩子函数 生命周期函数 生命周期钩子），会在特定的时刻调用。我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。初始化阶段：由 ReactDOM.render() 触发，初次渲染1、构造器：constructor()2、组件将要挂载的钩子：componentWillMount()3、组件渲染或组件更新的钩子：render()4、 组件挂载完毕的钩子：componentDi

页面中所有输入类的 DOM，随着输入，将内容维护到状态 state中，当需要使用时，直接从 state 中读取，这类 DOM属于受控组件。2、若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。// 阻止表单提交，form中的button默认也是onSubmit方法。// 阻止表单提交，form中的button默认也是onSubmit方法。1、若 A 函数，接收的参数是一个函数，那么 A 就可以称之为高阶函数。// 阻止表单提交，form中的button默认也是onSubmit方法。

不要过度使用 ref （比如，元素获取自身属性时，通过 event 对象，而不是 ref）为了更好的兼容性：React 使用的是自定义（合成）事件，而不是使用的原生 DOM 事件。为了的高效：React 中的事件是通过事件委托方式处理的（委托给组件最外层的元素）/* 事件委托机制，React会把事件加在最外层元素，div 身上 */// event 为 右侧 input。// 展示左侧输入框的数据。// event 为 按钮。// 展示右侧输入框的数据。// 创建ref容器。// 渲染组件到页面。

执行 1+n*2 次，初次渲染和更新时执行（第一次null，第二次DOM元素），不会产生什么问题。

理解1、每个组件对象都会有 props（properties的简写）属性2、组件标签的所有属性都保存在 props 中作用通过标签属性从组件外向组件内传递变化的数据注意组件内部不要修改 props 数据需求：自定义用来显示一个人员信息的组件姓名必须指定，且为字符串类型；性别为字符串类型，如果性别没有指定，默认为男年龄为字符串类型，默认为182、对 props 进行限制React 中使用 propTypes 对标签属性进行类型、必要性的限制React.PropTypes 形式 React v15.5 开始

/ console.log(this) // this为undefined，因为babel会将jsx转换为严格模式，严格模式下自定义函数中this为undefined。// 自定义方法：要用赋值语句的形式（将changeWeather放在实例对象上，而不是原型对象上）+ 箭头函数（箭头函数没有this，指向父级的this，为实例对象）// that = this // ********了解：赋值this给that。// let that // ********了解：定义变量，缓存this。

2、发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法。2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中。// * 类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。当应用的 js 都以模块来编写的，这个应用就是一个模块化的应用。// 2、渲染组件到页面（组件必须书写为标签形式，且闭合）当应用是以多组件的方式实现，这个应用就是一个组件化的应用。

React 概述React 是一个将数据渲染为 HTML 视图 的开源 JavaScript 库React 由 FaceBook 开发，且开源为什么要学习 React1、原生 JavaScript 操作 DOM 繁琐、效率低（使用 DOM-API 操作 UI）2、使用 JavaScript 直接操作 DOM，浏览器会进行大量的重绘重排3、原生 JavaScript 没有组件化编码方案，代码复用率低React 的特点1、采用组件化模式、声明式编码，提高开发效率及组件复用率。

全称为JavaScript XML，是 react 定义的一种类似于 XML 的 JS 扩展语法JS + XML 本质是 React.createElement(component, props, …children) 方法的语法糖，用来简化创建虚拟 DOM写法：var ele = Hello JSX!注意：它不是字符串，也不是 HTML/XML 标签它最终产生的就是一个 JS 对象。