React 知识点：基础语法、组件、React-Router、Redux

目录

一、React介绍

1、特点：数据驱动、组件化、虚拟DOM

二、开发环境

1、方法一：引入js

（1）npm i react@17.0.0  react-dom@17.0.0  babel-standalone@6.26.0 

（2）按顺序引入下面三个js文件

 2、方法二：create React App脚手架工具创建项目

（1）安装集成环境

（2）创建项目和运行

3、方法三：webpack手动搭建

开始一个React项目（一）一个最简单的webpack配置_dengdengda的博客-CSDN博客

三、核心基础

1、用法

2、jsx

（1）含义：

（2）规则：

3、操作属性

4、注释

5、操作样式

（1）行内样式

（2）类样式

6、操作事件

（1）注意事项：原生写法onClick中C要大写；事件处理函数名是个变量，用jsx写法;

7、Fragments  短语法：表示根元素，渲染后不会编译成其他元素

8、条件渲染

（1）注意事项：复杂的if语句，封装成函数，调用函数

9、列表渲染（map方法）

10、组件和props

（1）函数组件

（2）类组件（props 作为类对象子对象存在）

（3）使用

11、store（操作组件内部数据）

（1）类组件

注意：

*state可定义在constructor(){}内，也可以不定义在里面

*setState()是异步操作，若要等值更改好，在调用可使用promise方法包裹（例如商品列表加载更多）

12、类组件事件和this指向

（1）方法一：通过.bind改变this指向

（2）方法二：

注意：在constructor(){}里面定义变量，改变this指向

（3）方法三（箭头函数）

注意：如果回调函数通过props传入子组件时，这些组件可能会进行重新渲染

（4）方法四（事件处理函数定义为箭头函数，推荐使用）

注意：不传参时，绑定事件不用套一层箭头函数，传参时，绑定事件要套一层箭头函数

13、类组件改变状态值（类似于微信小程序原生写法）

14、阻止事件默认行为

四、组件通讯

1、props

（1）值只读，不能修改

（2）任意类型数据可传（字符串、jsx、数组、对象等）

2、插槽概念

（1）父组件

（2）子组件

3、子传父

（1）父组件

（2）子组件

4、兄弟之间

子组件A—父组件—子组件B

5、跨组件通讯（App组件向任意一个下层组件传递数据）

（1）利用Context实现

（2）src文件夹下创建utils文件夹，utils文件夹内创建utils.js文件，文件内创建Context对象，导出Provider和Consumer对象

（3）在index.js文件中引入utils.js暴露的Provider，Provider包裹根组件，并定义要传递的内容

（4）下层组件中引入utils.js中暴露的Consumer，接收根组件传递的值

6、Refs(允许访问DOM节点或render方法中创建的React元素-子组件)

（1）在类组件内部创建Refs对象，可多次创建，且只能在类组件中创建

五、生命周期

1、网址：React lifecycle methods diagram

2、生命周期视图

 3、生命周期钩子函数的触发时间和作用

（1）挂载阶段

注意事项：

*app.js文件内App组件不要用严格模式包裹，否则初始化时，componentDidMount会执行2次

 （2）更新阶段

 （3）卸载阶段

六、Hooks（只能在函数组件中使用）

1、定义

（1）一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数

（2）常用的Hooks:setState() setEffect()  setRef() setContext()

2、特点

（1）在组件之间复用状态逻辑, 无需修改组件结构

（2）将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分

（3）不编写 class 的情况下使用 state 以及其他的 React 特性

3、useState

（1）使用

（2）语法(useState内可定义数组、对象、数值、字符串等数据类型)

4、useEffect