react知识点

最新推荐文章于 2025-04-16 11:40:00 发布

乐容

最新推荐文章于 2025-04-16 11:40:00 发布

阅读量474

点赞数 3

分类专栏： react 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/m0_61265297/article/details/142852812

版权

react 专栏收录该内容

26 篇文章

订阅专栏

第1章 React简介
用于构建用户界面的JavaScript库（只关注页面），将数据渲染为HTML视图；

由Facebook开发且开源。

中文官网
英文官网

React可以克服原生JS的以下缺点：

原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；
JS直接操作DOM会使浏览器进行大量的重绘重排；
原生JS没有组件化编码方案，代码复用率低
react开发者工具：Chrome插件 React Developer Tool（注意安装来源为facebook的）

1.1 React的特点
采用组件化模式，声明式编码，提高开发效率及组件复用率;
在React Native中可以使用React语法进行移动端开发；
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

对比两次生成的虚拟DOM，如果重复，直接用页面之前有的DOM，而不是全部重绘真实DOM
1.2 引入文件
react.js （核心库）：核心库要在react-dom之前引入
react-dom.js ：提供操作DOM的react扩展库
babel.min.js：解析JSX语法代码转为JS代码的库，即ES6==>ES5;JSX==>JS
1.3 JSX
全称: JavaScript XML，是react定义的一种类似于XML的JS扩展语法，本质是React.createElement(component, props, ...children)方法的语法糖。JXS最终产生的虚拟DOM就是一个JS对象。

1.3.1 为什么要用JSX
更加简单地创建虚拟DOM
（1）使用JSX创建虚拟DOM

（2）使用JS创建虚拟DOM（用原生JS，不用babel，开发中不使用）

JSX创建虚拟DOM的方法是JS方法的语法糖

1.3.2 JSX语法规则
定义虚拟DOM时不用写引号
标签中混入JS表达式时要用{}
const VDOM=(
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
1
2
3
4
5
6
7
8
9
10
11
12
遇到以 { 开头的代码，以JS语法解析，且标签中的js表达式必须用{ }包含，比如<ul>中的{}中的{index}和{item}

注：key={index}：在进行组件遍历的时候必须要加一个key来区分每个组件

CSS类名指定不用class，用className
内联样式style={{key：value}}，如style={{color：‘white’，fontSize：20px}}
虚拟DOM必须只有一个根标签
标签必须闭合，如 <input type="test" />
标签首字母
（1）若小写字母开头，则转为html5中的同名元素，如无则报错
（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
辨析【js表达式】和【js语句 (代码)】

表达式：一个表达式可以产生一个值，可以放在任何需要值的地方，如
（1）a
（2）a+b
（3）demo(1)
（4）arr.map()
（5）function test () {}
语句（代码）：如
（1）if () {}
（2）for () {}
（3）switch () {case:xxxx}
1.4 虚拟DOM
本质是Object，即一般对象（不是数组对象和函数对象）
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是react内部在用，无需真实DOM中那么多属性
虚拟DOM最终会被react转换为真实DOM呈现在页面上
1.5 模块与组件
1.5.1 模块
向外界提供特定功能的js程序。随着业务逻辑增加，代码越来越多且复杂，此时js一般会拆成多个js文件来编写，一般一个js文件就是一个模块
作用：复用js，简化js的编写，提高js的运行效率
模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
1.5.2 组件
用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)。比如一个功能齐全的Header栏就是一个组件。
复用编码, 简化项目编码, 提高运行效率
组件化：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
第2章 React面向组件编程
2.1 创建组件
2.1.1 函数式组件
适用于简单组件（无state）

函数中的this指向undefined，因为babel编译后开启了严格模式
本例中，执行了ReactDOM.render(<MyComponent/>.......）之后，发生了什么？

React解析组件标签，找到了MyComponent组件。
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
2.1.2 类式组件
适用于复杂组件（有state）

类式组件必须要继承react的内值类React.Component
一定要写render函数，且要有返回值
render是放在类的原型对象上，供实例使用。
render中的this指向类的实例对象（原因见下方） <=> 类式组件的实例对象。
本例中，执行了ReactDOM.render(<MyComponent/>.......）之后，发生了什么？

React解析组件标签，找到了MyComponent组件。
发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
2.2 组件实例的三大属性
针对于类式组件，hooks可以让函数式组件也有三大属性

2.2.1 state属性
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
代码实例：点击切换天气状态

标准写法

           //render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
           render(){
               console.log('render');
               //读取状态
               const {isHot,wind} = this.state //这种写法的依据?
               //复杂方法
               // const isHot = this.state.isHot;
               // const wind = this.state.wind;
               return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
           }
           //、这里onclick是赋值语句，不能调用
           //changeWeather调用几次？ ———— 点几次调几次
           changeWeather(){
               //changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
               //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
               //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

               console.log('changeWeather');
               //获取原来的(isHot值
               const isHot = this.state.isHot
               //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换（wind还在）。
               this.setState({isHot:!isHot})
               console.log(this);

               //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
               //this.state.isHot = !isHot //这是错误的写法
           }
       }
       //2.渲染组件到页面
       ReactDOM.render(<Weather/>,document.getElementById('test'))

   </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
注意事项：

在构造器constructor中初始化state，且要用对象形式初始化state
在render函数中创建虚拟DOM时，直接在标签中绑定事件，且事件写法不同于原生JS，如原生JS中的onclick事件，在react中要写成onClick，其他同理。
onClick={this.changeWeather}是将this.changeWeather函数赋值给onClick，函数后面不能加括号，否则就是将函数返回值赋值
事件的回调函数要写在类中，此时它放在类的实例对象的原型链上，供实例使用。在本例中，由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用，且类中的方法默认开启了局部的严格模式，所以其中this的指向不是实例对象，而是undefined。render函数也是放在对象的原型链上，但是它是由类的实例对象调用的，所以this指向实例对象
自定义的事件回调函数的this可以在构造器中用bind更改指向，生成的新函数直接在类中，所以this指向实例对象
注意：状态必须通过setState以对象的形式进行更新,且更新是一种合并，不是替换
const {isHot,wind} = this.state是ES6中的对象解构，获取多个对象属性的方法
简写方法

           render(){
               const {isHot,wind} = this.state
               return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
           }

           //自定义方法————要用赋值语句的形式+箭头函数
           // changeWeather从原型上移到实例对象自身，外层函数的this就是箭头函数的this
           changeWeather = ()=>{
               const isHot = this.state.isHot
               this.setState({isHot:!isHot})
           }
       }
       //2.渲染组件到页面
       ReactDOM.render(<Weather/>,document.getElementById('test'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
注意事项：

类里可以直接写赋值语句，相当于追加属性（值写死），所以state可以直接在类里通过赋值的形式初始化，而不是在构造函数中
自定义回调函数的指向可以通过将箭头函数赋值的方式，从原型上转移到实例对象自身，箭头函数中this指向外层函数中的this，这里即为实例对象
强烈注意：

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
a) 强制绑定this: 通过函数对象的bind()
（可在constructor中用bind，也可在绑定事件函数时用bind，即onClick={this.changeWeather。bind(this)）
b) 箭头函数
状态数据，不能直接修改或更新
2.2.2 props属性
作用：通过标签属性（创建虚拟DOM时直接添加的数据）从组件外向组件内传递变化的数据
传递props，即传递标签属性，props批量传递标签属性
每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
注意: 组件内部不要修改props数据
代码实例：自定义用来显示一个人员信息的组件

基本使用

       const p = {name:'老刘',age:18,sex:'女'}
       ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))

       function speak(){
           console.log('我说话了');
       }
   </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
注意事项：

写入数据有两种方式：
a）在虚拟DOM标签中直接写入数据，如<Person name="18" age={18} sex="女"/>（{18}代表是数值型，“18”代表是字符串）。props是对象，里面存储着键值对形式，name="18" 中，name是键，"18"是值
b）在虚拟DOM标签中用扩展运算符展开对象，如<Person {...p}/>。这里…不是三点（拓展/展开运算符），因为对象不能使用拓展运算符（数组和可遍历的伪数组可以）。而{...obj}是ES6语法，是一个复制对象。但是在这里，{...p}并不是复制对象，因为这里的{}表示括号里面要写js表达式了，所以真正写的还是...p，这里react+babel就允许用展开运算符展开对象，不能随便使用（不能用console.log()查看）,仅仅适用于标签传递数据时。
数据会存入到类式组件props属性中，在render中可以通过this.props获取数据
内部读取某个属性值用this.props.属性名
组件类的构造函数constructor可省。
在 react 组件挂载之前，会调用它的构造函数。在为 React.Component 子类实现构造函数时，应在其他语句之前调用super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。

通常，在 react 中，构造函数仅用于以下两种情况： a）通过给 this.state 赋值对象来初始化内部 state。
b）为事件处理函数绑定实例

对props进行限制

首先要引入prop-types库，用于对组件标签属性进行限制

限制props有两种方法：
a）限制内容写在类外面

Person.propTypes = {
           name:PropTypes.string.isRequired, //限制name必传，且为字符串
           sex:PropTypes.string,//限制sex为字符串
           age:PropTypes.number,//限制age为数值
           speak:PropTypes.func,//限制speak为函数
       }
       //指定默认标签属性值
Person.defaultProps = {
   sex:'男',//sex默认值为男
   age:18 //age默认值为18
}
1
2
3
4
5
6
7
8
9
10
11
b）限制内容写在类里面

static propTypes = {
               name:PropTypes.string.isRequired, //限制name必传，且为字符串
               sex:PropTypes.string,//限制sex为字符串
               age:PropTypes.number,//限制age为数值
           }

           //指定默认标签属性值
static defaultProps = {
   sex:'男',//sex默认值为男
   age:18 //age默认值为18
}
1
2
3
4
5
6
7
8
9
10
11
注意事项：

首字母小写的propTypes是类里的属性规则
首字母大写的PropTypes是prop-types库里的内置对象
React v15.5 开始已弃用的写法name: React.PropTypes.string.isRequired
函数组件使用props

三大属性中，只有props可以用于函数组件，因为函数可以接收参数，state和refs都不能用于函数组件。

       //指定默认标签属性值
       Person.defaultProps = {
           sex:'男',//sex默认值为男
           age:18 //age默认值为18
       }
       //渲染组件到页面
       ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
   </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
注意事项：

限制props只能使用第一种方法
2.2.3 refs属性
组件内的标签可以定义ref属性来标识自己。

this.refs拿到真实DOM
字符串形式的ref

class Demo extends React.Component{
           //展示左侧输入框的数据
           showData = ()=>{
               console.log(this);
               const {input1} = this.refs
               alert(input1.value)
           }
           //展示右侧输入框的数据
           showData2 = ()=>{
               console.log(this);
               const {input2} = this.refs
               alert(input2.value)
           }
           render(){
               return(
                   <div>
                       <input ref="input1" type="text" placeholder="点击按钮提示数据"/> 
                       <button onClick={this.showData}>点我提示左侧的数据</button> 
                       <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
                   </div>
               )
           }
       }
       //渲染组件到页面
       ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
不被官方推荐，因为效率不高

回调ref

1. 内联函数（推荐）

<input ref={currentNode => this.input1 = currentNode } type="text" placeholder="点击按钮提示数据"/> 
{/*这里的this是指向实例对象，因为箭头函数没有指向，查找外侧的this指向*/}
1
2
注意：

函数中的参数currentNode是ref所在的节点
此时input1是类的属性，即直接绑定到类里，而不是像字符串ref一样添加到refs对象里
回调函数：有定义、没有执行（函数名（））、最终执行（别人调用）

2. 类绑定函数

saveInput = (c)=>{
               this.input1 = c;
               console.log('@',c);
           }
<input ref={this.saveInput} type="text"/>
1
2
3
4
5
3. 回调ref中回调执行次数
内联函数更新时会执行两次，一次清空，一次执行函数，类绑定函数不会。

交互和更改状态的区别：取决于是否修改render函数中节点的内容

createRef（react最推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的，有多少个节点表示ref，就要调用多少次 React.createRef
2.2.4 事件处理
通过onXxx属性指定事件处理函数(注意大小写)
a）React使用的是自定义(合成)事件, 而不是使用的原生DOM事件——为了更好的兼容性
b）React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)———为了高效
通过event.target得到发生事件的DOM元素对象。发生事件的元素就是操作的元素则可以省略ref。
不要过度使用ref。
2.3 受控组件和非受控组件
以表单提交案例为例

2.3.1 非受控组件
用ref实现

页面中所有的输入类DOM现用现取，即通过ref标识DOM，进而获取数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
知识点：

表单<form>中都有onSubmit属性来控制提交之后的状态
输入DOM（如<input>）得有name属性才能通过GET请求获取到query参数（用？携带）
删掉action无法阻止表单页面刷新以及地址栏更新，得要禁止默认事件event.preventDefault()
<button>的默认type属性值就是submit
2.3.2 受控组件
用onChange+state实现
页面中所有的输入类DOM将数据存在state中

更推荐用受控组件，减少ref的使用

           //初始化状态
           state = {
               username:'', //用户名
               password:'' //密码
           }

           //保存用户名到状态中
           saveUsername = (event)=>{
               this.setState({username:event.target.value})
           }

           //保存密码到状态中
           savePassword = (event)=>{
               this.setState({password:event.target.value})
           }

           //表单提交的回调
           handleSubmit = (event)=>{
               event.preventDefault() //阻止表单提交
               const {username,password} = this.state
               alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
           }

           render(){
               return(
                   <form onSubmit={this.handleSubmit}>
                       用户名：<input onChange={this.saveUsername} type="text" name="username"/>
                       密码：<input onChange={this.savePassword} type="password" name="password"/>
                       <button>登录</button>
                   </form>
               )
           }
       }
       //渲染组件
       ReactDOM.render(<Login/>,document.getElementById('test'))
   </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2.4.1 高阶函数
如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

function sum(a){
   return(b)=>{
       return (c)=>{
           return a+b+c
       }
   }
}
1
2
3
4
5
6
7
用函数的柯里化实现受控组件
为了不重复编写相似的代码，如saveUsername和savePassword

           //保存表单数据到状态中（函数的柯里化）
           saveFormData = (dataType)=>{
               return (event)=>{
                   this.setState({[dataType]:event.target.value})
               }
           }

           //表单提交的回调
           handleSubmit = (event)=>{
               event.preventDefault() //阻止表单提交
               const {username,password} = this.state
               alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
           }
           render(){
               return(
                   <form onSubmit={this.handleSubmit}>
                       用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
                       密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
                       <button>登录</button>
                   </form>
               )
           }
       }
       //渲染组件
       ReactDOM.render(<Login/>,document.getElementById('test'))
   </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
this.saveFormData('username')，有了小括号，立即调用，但是返回的还是一个函数，符合回调函数的要求
[dataType]：调用变量形式的对象属性名
event形参不需要实参，可以直接调用，所以event不能写进this.saveFormData('username')的参数中，得用柯里化形式来体现
不用函数柯里化的实现方式
只需改两处：
saveFormData = (dataType,event)=>{
this.setState({[dataType]:event.target.value})
}
用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
1
2
3
4
两种方法都常用

2.5 生命周期
2.5.1 引入
组件从创建到死亡它会经历一些特定的阶段。
React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
生命周期回调函数<=> 生命周期钩子函数<=>生命周期函数<=>生命周期钩子
挂载 mount：组件第一次被渲染到DOM中的时候，就为其设置一个计时器，叫挂载 ReactDOM.render(<Life/>, document.querySelector('test'))
卸载 unmount：组件被删除时，应该清除计时器，在react中被称为卸载 ReactDOM.unmountComponentAtNode(document.querySelector('test'))
知识点：

行内样式写法：style={{opacity:opacity}}；
对象中属性名和属性值相同时触发简写：{opacity：opacity}简写为{opacity}
render执行次数：1+n（初始化渲染+更新状态）
2.5.2 react生命周期（旧）

三条线：

父组件render–>componentWillReceiveProps–>shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate–>componentWillUnmount
setState()–>shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate–>componentWillUnmount
forceUpdate()–>componentWillUpdate–>render–>componentDidUpdate–>componentWillUnmount
知识点：

shouldComponentUpdate返回值必须为true或false，若不写，默认为true
forceUpdate()：强制更新。不更改任何状态中的数据，强制更新一下
componentWillReceiveProps：第一次调用不算。
生命周期的三个阶段（旧）

初始化阶段: 由ReactDOM.render()触发—初次渲染
1）constructor()
2）componentWillMount()
3）render()：常用，一定得调用
4）componentDidMount()：常用，一般在这个钩子中做一些初始化的事，如开启定时器、发送网络请求、订阅消息
更新阶段: 由组件内部this.setSate()或父组件重新render触发
1）shouldComponentUpdate()
2）componentWillUpdate()
3）render()
4）componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1）componentWillUnmount() ：常用，一般在这个钩子中做一些收尾的事，如关闭定时器、取消订阅消息
2.5.3 react生命周期（新）

17及以上版本componentWillMount、componentWillUpdate、componentWillReceiveProps三个钩子使用前要加UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。
新的生命周期和旧的生命周期相比，除了即将废弃三个钩子，还添加了两个新的钩子getDerivedStateFromProps和getSnapshotBeforeUpdate
static getDerivedStateFromProps：适用于罕见用例（几乎不用），返回null或state对象，state的值在任何时候都取决于props
getSnapshotBeforeUpdate(prevProps,prevState,)：在更新之前获取快照，返回值传递给componentDidUpdate(prevProps,prevState,snapshotValue)
2.6 虚拟DOM与DOM Diffing算法
DOM Diffing算法对比的最小粒度是标签，且逐层对比

2.6.1 key的作用
经典面试题：

react/vue中的key有什么作用？（key的内部原理是什么？）
为什么遍历列表时，key最好不要用index?
解释：

虚拟DOM中key的作用：
简单地说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。

详细地说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
(1) 若虚拟DOM中内容没变, 直接使用之前的真实DOM
(2) 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
b. 旧虚拟DOM中未找到与新虚拟DOM相同的key：
根据数据创建新的真实DOM，随后渲染到到页面

用index作为key可能会引发的问题：
若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

如果结构中还包含输入类的DOM（如input，虚拟DOM中标签属性少，input没有value属性）：
会产生错误DOM更新 ==> 界面有问题。

注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

开发中如何选择key?
最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
如果确定只是简单的展示数据，用index也是可以的。
第3章 react应用（基于react脚手架）
使用脚手架开发的项目：模块化、组件化、工程化

3.1 前期准备
3.1.1 安装node.js及npm
安装教程

下载.msi安装包 node官网
安装路径： D:\nodejs\
查看是否安装成功：win+r输入cmd，输入命令node；查看npm版本 npm -v。node.js安装时会自动安装npm
改变npm下载的模块包的默认存储地址：
npm config set prefix “D:\nodejs\node_global”
更改默认缓存位置：npm config set cache “D:\nodejs\node_cache”
测试：npm list -global或者npm config get prefix或者npm config get cache
更改环境变量
控制面板–系统–高级系统设置–高级–环境变量
1）用户变量 path 中把 C:\Users\Administrator\AppData\Roaming\npm;—改为----D:\nodejs\node_global
2）在系统变量中新增变量NODE_PATH----- D:\nodejs\node_global\node_modules
安装cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org
安装yarn：不推荐用npm i -g yarn 安装（但我是这样装的）
react扩展程序： React Developer Tools（facebook）

问题：

安装了cnpm之后，才成功安装了 cnpm i -g create-react-app
cmd必须得以管理员模式运行才能使用npm命令。解决方式是将vscode以管理员模式运行，并用vscode运行npm命令
全局安装react脚手架： npm i -g create-react-app （不成功），得用 cnpm i -g create-react-app
创建项目：切换到想创建项目的文件夹，使用命令create-react-app app_name

换源：在这里建议把npm换源，使用国内镜像创建项目。因为使用脚手架配置项目的时候，需要下载的依赖实在太多，不换源的话很可能中途卡住就失败了。（没换）
换源方式： npm config set registry https://registry.npm.taobao.org
验证是否换源成功：npm config get registry
显示出上述地址的话就是换源成功了
npm cnpm npx nvm区别

知识点：

vscode安装时勾选open with code
react是SPA应用
index.html文件中，%PUBLIC_URL% 代表public文件夹的路径
robots.txt 爬虫规则文件
export name 分别暴露；export default name 默认暴露
import React，{Component} from ‘react’ :{Component}在react文件里分别暴露了
3.1.2 react脚手架项目结构
public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
App.css -------- App组件的样式，App.js里引用
App.js --------- App组件，子组件可以都写在components文件夹里，子组件文件夹首字母大写。路由组件写在pages文件夹中
App.test.js ---- 用于给App做测试
index.css ------ 样式，通用样式，入口文件里引用
index.js ------- 入口文件
logo.svg ------- logo图
reportWebVitals.js-------页面性能分析文件(需要web-vitals库的支持)
setupTests.js-------组件单元测试的文件(需要jest-dom库的支持)
注意：
组件js文件除了首字母大写，还可以将后缀改为jsx，来和普通js文件进行区分

3.1.3 样式模块化
import name from './name.module.css'
className={name.title}
1
2
基本上不用，而是用less嵌套

遇到的问题：

删除引入网站页签图标的代码后，页签还是在？？？
因为浏览器缓存了之前的图标，清空浏览器缓存之后，就正常了（并不是）

win10系统下在cmd中输入npm start后，项目能正常跑起来，但是整个cmd窗口就不能再输入任何东西
ctrl+c 可以停掉

安装插件 ES7+ React/Redux/React-Native snippets

3.1.4 功能界面的组件化编码流程（通用）
拆分组件: 拆分界面,抽取组件
实现静态组件: 使用组件实现静态页面效果
实现动态组件
3.1 动态显示初始化数据
3.1.1 数据类型
3.1.2 数据名称
3.1.3 保存在哪个组件?
3.2 交互(从绑定事件监听开始)
3.2 案例：组件的组合使用——TodoList
3.2.1 注意事项
APP给list用props传递参数：<List todos={todos}/>，这里是以键值对的形式传递数组，键是第一个todos，数组是第二个todos。其中第二个todos（数组）为const {todos}=this.state，todos是从state中解构出来的由对象组成的数组。
List给Item用props传递参数：
todos.map(todo=>{
return <Item key={todo.id} {...todo}/>
})
1
2
3
其中 {todos}=this.props ，是 todos解构对象成数组，即 todos=[{},{}],todo代表todos数组中的每个元素（对象）。

{...todo}是在展开对象。原生js中，对象不能使用拓展运算符（数组和可遍历的伪数组可以）。而{...obj}是ES6语法，是一个复制对象。但是在这里，{...todo}并不是复制对象，因为这里的{}表示括号里面要写js表达式了，所以真正写的还是...todo，这里react+babel就允许用展开运算符展开对象，不能随便使用（不能用console.log()查看）,仅仅适用于标签传递数据时。

父组件向子组件传数据：直接在子组件标签中添加键值对形式的数据（props）
子组件向父组件传递数据：父组件通过props给子组件传递一个函数，子组件在想要传递数据给父组件时，调用该函数
生成时间戳:Date.now()
UUID：生成唯一时间戳的库
npm i uuid （库比较大）
npm i nanoid（库小，很快安装）/ yarn add nanoid
用法：
import {nanoid} from 'nanoid'
//调用
nanoid()
1
2
3
str.trim() 去除字符串的头尾空格
onMouseLeave={this.handleMouse(false)}：小括号调用了函数，定义函数时要柯里化
状态在哪里，操作状态的方法就在哪里
window.confirm("确定删除吗")：返回true或false
在react中，<input type="checkbox"/>若加了checked属性，则必须加onChange事件，不然无法改变勾选状态。defaultChecked只在第一次起效果。
3.2.2 todoList案例相关知识点
拆分组件、实现静态组件，注意：className、style的写法
动态初始化列表，如何确定将数据放在哪个组件的state中？
1）某个组件使用：放在其自身的state中
2）某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
关于父子之间通信：
1）【父组件】给【子组件】传递数据：通过props传递
2）【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value
状态在哪里，操作状态的方法就在哪里
第4章 React ajax
4.1 理解
React本身只关注于界面, 并不包含发送ajax请求的代码
前端应用需要通过ajax请求与后台进行交互(json数据)
react应用中需要集成第三方ajax库(或自己封装，但是基本不会自己封装)
4.2 实现
jQuery: 要操作DOM，并且比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用
1）封装XmlHttpRequest对象的ajax
2）promise风格
3）可以用在浏览器端和node服务器端
4.3 配置代理
react脚手架配置代理总结
方法一

在package.json中追加如下配置

"proxy":"http://localhost:5000"
1
说明：

优点：配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理。
工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）
方法二

第一步：创建代理配置文件

在src下创建配置文件：src/setupProxy.js(不允许改名)
1
编写setupProxy.js配置具体代理规则：

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
app.use(
proxy('/api1', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
changeOrigin: true, //控制服务器接收到的请求头中host字段的值
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
   changeOrigin默认值为false，但我们一般将changeOrigin值设为true
*/
pathRewrite: {'^/api1': ''} //去除请求前缀/api1，保证交给后台服务器的是正常请求地址(必须配置)
}),
proxy('/api2', {
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: {'^/api2': ''}
})
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
说明：

优点：可以配置多个代理，可以灵活的控制请求是否走代理。
缺点：配置繁琐，前端请求资源时必须加前缀。
学习原生AJAX时，解决跨域问题是在server.js代码中加入以下代码（即在后端解决）
//设置响应头设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//响应头
response.setHeader('Access-Control-Allow-Headers', '*');
1
2
3
4
为CORS解决方案

注意：127.0.0.1和localhost的区别

127.0.0.1 为保留地址，直白地说 127.0.0.1 就是一个 ip 地址，不同于其它 ip 地址的是它是一个指向本机的 ip 地址，也称为环回地址，该 ip 地址不能使用在公网 ip 上，对任何一台电脑来说,不管是否连接到INTERNET上，127.0.0.1 都是指向自己。
事实上整个 127.* 网段都是环回地址，127.* ip 段都为保留地址，只是规则制定者将其中的 127.0.0.1 规定为指向本机自己。

在电脑网络中，localhost 为“本地主机”，是给回路网络接口（loopback）的一个标准主机名，IPv4 相对应的地址为 127.0.0.1，IPv6 相对应的地址为 [::1]，这个名称也是一个保留域名。
说白了就是 localhost 就是一个本地域名，不是地址。该本地域名指向的 ip 地址就是 127.0.0.1 ，也就是指向本机，localhost 更方便记忆与输入，因 hosts文件定义了 localhost = 127.0.0.1 ，所以你只需要记住 localhost 就可以代表本机了。

对机器来说，它需要通过 hosts 文件来定义 localhost = 127.0.0.1（多一次解析 ip 的步骤），才能知道 localhost 代表的是本机，机器只知道 127.0.0.1 代表本机，因此当你向 localhost 发消息的时候，机器会自动翻译后给127.0.0.1发消息。

在实际工作中，localhost 是不经过网卡传输的，所以它不受网络防火墙和与网卡相关的种种限制，而 127.0.0.1 则要通过网卡传输数据，是必须依赖网卡的。这一点也是 localhost 和 127.0.0.1 的最大的区别，这就是为什么有时候用 localhost 可以访问，但用 127.0.0.1 就不可以的情况。

4.4 案例—github用户搜索
4.4.1 axios发送请求
连续解构赋值：
const {keyWordElement:{value}} = this
1
相当于 this.keyWordElement.value，此时keyWordElement并没有被解构，只是写的过程，即

console.log(keyWordElement) // undefined
1
const {keyWordElement:{value:keyWord}} = this
1
连续解构赋值+重命名

状态中的数据驱动着页面的展示
连续写三元表达式
isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
isLoading ? <h2>Loading......</h2> :
err ? <h2 style={{color:'red'}}>{err}</h2>
1
2
3
如果第一个判断为正确，就不会执行后面的代码了，所以顺序很重要

4.4.2 消息订阅-发布机制（pubsub-js）
使用：

工具库: PubSubJS
下载: npm install pubsub-js --save
使用:
1) import PubSub from ‘pubsub-js’ //引入
2) PubSub.subscribe(‘delete’, function(data){ }); //订阅
3) PubSub.publish(‘delete’, data) //发布消息
注意：
4. 适用于任意组件之前的消息沟通
5. 谁用谁接，谁传谁发

4.4.3 扩展：使用Fetch发送网络请求（用得不多）
发送AJAX请求的方法：
原生AJAX：xhr
jQuery：对xhr的封装
axios：对xhr的封装
fetch：不是库，是windows内置，且是Promise风格。和xhr并列
fetch的特点关注分离
fetch兼容性不高
4.4 案例总结
设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。
ES6小知识点：解构赋值+重命名
let obj = {a:{b:1}}
const {a} = obj; //传统解构赋值
const {a:{b}} = obj; //连续解构赋值
const {a:{b:value}} = obj; //连续解构赋值+重命名
消息订阅与发布机制
1.先订阅，再发布（理解：有一种隔空对话的感觉）
2.适用于任意组件间通信
3.要在组件的componentWillUnmount中取消订阅
fetch发送请求（关注分离的设计思想）
   try {
       const response= await fetch(`/api1/search/users2?q=${keyWord}`)
       const data = await response.json()
       console.log(data);
   } catch (error) {
       console.log('请求出错',error);
   }
1
2
3
4
5
6
7
第5章 react路由（v5）
5.1. 相关理解
5.1.1. SPA的理解
单页Web应用（single page web application，SPA）。
整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取, 并在前端异步展现。
单页面、多组件
5.1.2. 路由的理解
什么是路由?
一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component
路由分类
后端路由：
1) 理解： value是function, 用来处理客户端提交的请求。
2) 注册路由： router.get(path, function(req, res))
3) 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由：
1) 浏览器端路由，value是component，用于展示页面内容。
2) 注册路由: <Route path="/test" component={Test}>
3) 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
4）前端路由也要靠BOM 上的 history
5.1.3. react-router-dom的理解
react的一个插件库。
专门用来实现一个SPA应用。
基于react的项目基本都会用到此库。
**注意：**react-router总共有三种形式的库，适用于三种场景：

web，对应的库名叫react-router-dom
native
anywhere（哪里都可以用）
5.2 路由的基本使用
明确好界面中的导航区、展示区

导航区的a标签改为Link标签
Demo

展示区写Route标签进行路径的匹配（在呈现路由组件内容的位置注册路由）
以前的版本

<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
1
2
现在的版本 6.x.x

<Routes>
<Route path="/about" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
</Routes>
1
2
3
4
<App/>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

注意：

import {Link,Route} from 'react-router-dom' 分别暴露，用哪个组件取哪个组件 -
用<HashRouter>地址栏中#后面的内容不会作为资源发给服务器
5.3 路由组件与一般组件
写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
存放位置不同：
一般组件：components
路由组件：pages
接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性
history:
           go: ƒ go(n)
           goBack: ƒ goBack()
           goForward: ƒ goForward()
           push: ƒ push(path, state)
           replace: ƒ replace(path, state)
location:
           pathname: "/about"
           search: ""
           state: undefined
match:
           params: {}
           path: "/about"
           url: "/about"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
5.4 NavLink及其封装
NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
标签体内容是一个特殊的标签属性，可以通过this.props.children获取。因此以下两段代码是等价的。
<NavLink activeClassName="atguigu" className="list-group-item" children="About" />
1
<NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink>
1
5.5 Switch
注册路由时用Switch包裹所有路由
通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率(单一匹配)。
5.6 解决样式丢失问题
什么时候样式丢失？
路由路径多级，且刷新的时候

解决办法
1）public/index.html 中引入样式时不写 ./ 而是写 / （常用）。因为./是相对路径，去掉之后就是绝对路径，直接去localhost:3000下调文件

5.7 路由的模糊匹配与严格匹配
默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）

<MyNavLink to="/about/a/b">Home</MyNavLink> //模糊匹配
<Route path="/about" component={About}/>
1
2
开启严格匹配：

<Route exact={true} path="/about" component={About}/>
// exact={true}可以简写为exact
1
2
严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
5.8 Redirect重定向
一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
具体编码：
<Switch>
   <Route path="/about" component={About}/>
   <Route path="/home" component={Home}/>
   <Redirect to="/about"/>
</Switch>
1
2
3
4
5
5.8 嵌套路由（多级路由）
注册子路由时要写上父路由的path值
{/* 注册路由 */}
<Switch>
   <Route path="/home/news" component={News}/>
   <Route path="/home/message" component={Message}/>
   <Redirect to="/home/news"/>
</Switch>
1
2
3
4
5
6
路由的匹配是按照注册路由的顺序进行的
5.9 向路由组件传递参数
5.9.1 params参数（最多）
路由链接(携带参数)：
<Link to='/demo/test/tom/18'}>详情</Link>
1
注册路由(声明接收)：
<Route path="/demo/test/:name/:age" component={Test}/>
1
接收参数：this.props.match.params
5.9.2 search参数
路由链接(携带参数)：
<Link to='/demo/test/?name=tom&age=18'}>详情</Link>
//？前面加不加/
1
2
注册路由(无需声明，正常注册即可)：
<Route path="/demo/test" component={Test}/>
1
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码（即，name=tom&age=18）字符串，需要借助querystring解析（querystring.stringify(obj), querystring.parse(str)）。去掉问号用qs.parse(str.slice(1)
5.9.3 state参数（不同于普通组件的state属性）
路由链接(携带参数)：
<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
1
注册路由(无需声明，正常注册即可)：
<Route path="/demo/test" component={Test}/>
1
接收参数：this.props.location.state
备注：刷新也可以保留住参数，但回退不行，无法回退到上一个·同级路由**？？？？**（老师演示的时候可以回退，自己跑代码回退不了）
5.10 push和replace（难）
路由是对浏览器历史记录的操作，总共有两种操作，push（压栈）和replace（替代栈顶元素）。
默认是push模式，要想开启replace模式，则在路由连接<Link>标签中加入replace={true}或replace
5.11 编程式路由导航
借助this.prosp.history对象上的API对操作路由跳转、前进、后退，而不用路由的<Link>和<NavLink>，但还是要注册路由

this.prosp.history.push()
this.prosp.history.replace()
this.prosp.history.goBack()
this.prosp.history.goForward()
this.prosp.history.go()
5.12 withRouter的使用
withRouter可以加工一般组件，让一般组件具备路由组件所特有的API

withRouter的返回值是一个新组件。

在一般组件中要用到路由组件的props属性时引入。

import {withRouter} from 'react-router-dom'
1
需要暴露

export default withRouter(Header)
1
5.12 BrowserRouter与HashRouter的区别
底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
刷新后对路由state参数的影响
1）BrowserRouter没有任何影响，因为state保存在history对象中。
2）HashRouter刷新后会导致路由state参数的丢失！！！
备注： HashRouter可以用于解决一些路径错误相关的问题。
第6章 React UI组件库
6.1 简介
material-ui(国外)

官网: http://www.material-ui.com/#/
github: https://github.com/callemall/material-ui
ant-design(国内蚂蚁金服)

官网: https://ant.design/index-cn
Github: https://github.com/ant-design/ant-design/
不是所有场景都使用，最适用于后台管理系统
6.2 使用
安装依赖:npm install antd
引入样式（不太合理，引入了全部组件的样式，应该按需引入）

import '../node_modules/antd/dist/antd.css'
1
引入库：

import { Button,DatePicker } from 'antd';
import {WechatOutlined,WeiboOutlined,SearchOutlined} from '@ant-design/icons'
1
2
学会查看官网文档
其他UI组件库：element ui、vant等

6.3 按需引入和自定义主题
重点：学会查看文档（3.x文档更清楚，且适用于4.x）

安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
修改package.json
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
},
1
2
3
4
5
6
根目录下创建config-overrides.js
//配置具体的修改规则
const { override, fixBabelImports,addLessLoader} = require('customize-cra');
module.exports = override(
   fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
       style: true,
   }),
   addLessLoader({
       lessOptions:{
           javascriptEnabled: true,
           modifyVars: { '@primary-color': 'green' },
       }
   }),
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css'应该删掉
第7章 redux
7.1 redux理解
7.1.1 学习文档
英文文档: https://redux.js.org/
中文文档: http://www.redux.org.cn/
Github: https://github.com/reactjs/redux
7.1.2 redux简介
redux是一个专门用于做状态管理的JS库(不是react插件库)。
它可以用在react, angular, vue等项目中, 但基本与react配合使用。
作用: 集中式管理react应用中多个组件共享的状态。
7.1.3 什么情况下需要使用redux
某个组件的状态，需要让其他组件可以随时拿到（共享）。
一个组件需要改变另一个组件的状态（通信）。
总体原则：能不用就不用, 如果不用比较吃力才考虑使用。
7.1.4 redux工作流程

dispatch(action)是一个函数，action是一个对象
Action Creators（服务员）
Store（老板）
Reducers（厨师）
7.2 redux的三个核心概念
7.2.1. action
动作的对象
包含2个属性
type：标识属性, 值为字符串, 唯一, 必要属性
data：数据属性, 值类型任意, 可选属性
例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
7.2.2. reducer
用于初始化状态、加工状态。
加工时，根据旧的state和action，产生新的state的纯函数。
有几个组件就有几个reducer？
7.2.3. store
将state、action、reducer联系在一起的对象

如何得到此对象?
1) import {createStore} from 'redux'
2) import reducer from './reducers'
3) const store = createStore(reducer)

此对象的功能?
1) getState(): 得到state
2) dispatch(action): 分发action, 触发reducer调用, 产生新的state
3) subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

7.3. redux的核心API
7.3.1. createstore()
作用：创建包含指定reducer的store对象

7.3.2. store对象
作用: redux库最核心的管理对象

它内部维护着:
1) state
2) reducer

核心方法:
1) getState()
2) dispatch(action)
3) subscribe(listener) ：store监测redux里的状态变化，发生变化则会被调用

具体编码:
1) store.getState()
2) store.dispatch({type:'INCREMENT', number})
3) 放在入口文件index.js中

store.subscribe(()=>{
ReactDOM.render(<App/>,document.getElementById('root'))
})
1
2
3
7.3.3. applyMiddleware()
作用：应用上基于redux的中间件(插件库)

7.3.4. combineReducers()
作用：合并多个reducer函数

7.4 求和案例
7.4.1 求和案例_redux精简版
去除Count组件自身的状态

src下建立:

//文件
-redux
-store.js
-count_reducer.js
1
2
3
4
store.js：
1）引入redux中的createStore函数，创建一个store
2）createStore调用时要传入一个为其服务的reducer
3）记得暴露store对象（store.js默认暴露一个函数调用，函数返回一个对象，其他文件引入的时候将此对象命名为store）

count_reducer.js：
1）reducer的本质是一个函数，接收：preState,action，返回加工后的状态
2）reducer有两个作用：初始化状态，加工状态
3）reducer被第一次调用时，是store自动触发的。传递的preState是undefined，传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

在index.js中监测store中状态的改变，一旦发生改变重新渲染

备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

7.4.2 求和案例_redux完整版
新增文件：

count_action.js 专门用于创建action对象
注意：箭头函数返回一个对象时，要用（）包裹，不然会被识别为函数体的{}
createIncrementAction = data => ({type:INCREMENT,data})
1
'
运行运行
constant.js 放置容易写错的type值，目的只有一个：便于管理的同时防止程序员单词写错（要暴露）
7.4.3 求和案例_redux异步action版（非必须）
同步action：action的值是对象
异步action：action的值是函数。异步action一般会调用同步action
明确：延迟的动作（异步操作）不想交给组件自身，想交给action
何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
具体编码：
1）yarn add redux-thunk，并配置在store中
2）创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
3）异步任务有结果后，分发一个同步的action去真正操作数据。
备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。
7.4.4 求和案例_react-redux基本使用

明确两个概念：
1）UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。
2）容器组件：负责和redux通信，将结果交给UI组件。

如何创建一个容器组件—靠react-redux 的connect函数：

connect(mapStateToProps,mapDispatchToProps)(UI组件)
1
1）mapStateToProps:映射状态，返回值是一个对象。返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
2）mapDispatchToProps:映射操作状态的方法，返回值是一个对象。返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value

备注：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入

7.4.5 求和案例_react-redux优化
容器组件和UI组件整合一个文件

若有多个容器组件，无需自己给每个容器组件传递store，给包裹一个<Provider store={store}>即可。

使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。

mapDispatchToProps也可以简单的写成一个对象，因为react-redux可以自动dispatch

一个组件要和react-redux“打交道”要经过哪几步？
1）定义好UI组件—不暴露
2）引入connect生成一个容器组件，并暴露，写法如下：

connect(
state => ({key:value}), //映射状态
{key:xxxxxAction} //映射操作状态的方法
)(UI组件)
1
2
3
4
3）在UI组件中通过this.props.xxxxxxx读取和操作状态

7.4.6 求和案例_react-redux数据共享版
定义一个Person组件，和Count组件通过redux共享数据。
为Person组件编写：reducer、action，配置constant常量。
重点：Person的reducer和Count的Reducer要使用combineReducers进行合并。合并后的总状态是一个对象！！！
交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。
reducers进行浅比较，数组、对象只比较地址，所以地址不变就不会重新渲染
7.4.7 求和案例_react-redux开发者工具的使用
Redux DevTools

引入库
yarn add redux-devtools-extension
1
在store.js中进行配置
import {composeWithDevTools} from 'redux-devtools-extension'
export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
1
2
7.4.8 求和案例_react-redux最终版
所有变量名字要规范，尽量触发对象的简写形式。
reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer
7.5 纯函数和高阶函数
7.5.1. 纯函数
一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)
必须遵守以下一些约束
1) 不得改写参数数据
2) 不会产生任何副作用，例如网络请求，输入和输出设备
3) 不能调用Date.now()或者Math.random()等不纯的方法
redux的reducer函数必须是一个纯函数
7.8.2. 高阶函数
理解: 一类特别的函数
1) 情况1: 参数是函数
2) 情况2: 返回是函数
常见的高阶函数:
1) 定时器设置函数
2) 数组的forEach()/map()/filter()/reduce()/find()/bind()
3) promise
4) react-redux中的connect函数
作用: 能实现更加动态, 更加可扩展的功能
7.9 项目打包
打包

npm run build
1
生成build文件夹

部署在服务器上
1）阿里云线上服务器
2）express（Node中快速搭建服务器的框架）搭建服务器
3）借助第三方库库快速搭建：以指定的文件夹作为根目录快速开启一台服务器。如 serve

npm i serve -g //全局安装
serve build // 打开生成的build文件夹
1
2
第8章扩展
8.1 setState
setState更新状态的2种写法

setState(stateChange, [callback])------对象式的setState
1）stateChange为状态改变对象(该对象可以体现出状态的更改)
2）callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

setState(updater, [callback])------函数式的setState
1）updater为返回stateChange对象的函数。
2）updater可以接收到state和props。
3）callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

总结:

对象式的setState是函数式的setState的简写方式(语法糖)
使用原则：
1）如果新状态不依赖于原状态 ===> 使用对象方
2）如果新状态依赖于原状态 ===> 使用函数方式
3）如果需要在setState()执行后获取最新的状态数据,
要在第二个callback函数中读取
8.2 lazyLoad
路由组件的lazyLoad
通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
通过指定在加载得到路由打包文件前显示一个自定义loading界面
   //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
   const Login = lazy(()=>import('@/pages/Login')) //函数体不能加花括号

   //2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
   <Suspense fallback={<h1>loading.....</h1>}>
<Switch>
<Route path="/xxx" component={Xxxx}/>
<Redirect to="/login"/>
</Switch>
</Suspense>
1
2
3
4
5
6
7
8
9
10
8.3 Hooks
8.3.1 React Hook/Hooks是什么?
Hook是React 16.8.0版本增加的新特性/新语法
可以让你在函数组件中使用 state 以及其他的 React 特性
8.3.2 三个常用的Hook
State Hook: React.useState()
Effect Hook: React.useEffect()
Ref Hook: React.useRef()
8.3.3 State Hook
State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
语法:
const [xxx, setXxx] = React.useState(initValue)
1
useState()说明:
参数: 第一次初始化指定的值在内部作缓存
返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
setXxx()的2种写法:
setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值
8.3.4 Effect Hook
Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
React中的副作用操作:
发ajax请求数据获取
设置订阅 / 启动定时器
手动更改真实DOM（尽量避免）
语法和说明:
useEffect(() => {
// 在此可以执行任何带副作用操作
return () => { // 在组件卸载前执行
// 在此做一些收尾工作, 比如清除定时器/取消订阅等
}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
1
2
3
4
5
6
可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount()
componentDidUpdate()
componentWillUnmount()
8.3.5 Ref Hook
Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
语法：
const refContainer = useRef() //声明
refContainer.current.xxx //调用
1
2
作用：保存标签对象，功能与React.createRef()一样
8.4 Fragment
使用

import {Fragment } from 'react'
//类似于一个<div>
<Fragment></Fragment> //可以添加一个属性 'key'，用于遍历
<></> //不能添加任何属性

1
2
3
4
5
作用：可以不用必须有一个真实的DOM根标签了

8.5 Context
8.5.1 理解
一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

8.5.2 使用
创建Context容器对象：

const XxxContext = React.createContext()
//const {Provider,Consumer} = XxxContext 也可以结构赋值
1
2
渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：

<xxxContext.Provider value={数据}>
子组件
</xxxContext.Provider>
1
2
3
后代组件读取数据：
1）第一种方式:仅适用于类组件

static contextType = xxxContext // 声明接收context
this.context // 读取context中的value数据
1
2
2）第二种方式: 函数组件与类组件都可以

<xxxContext.Consumer>
       //组件中的函数
   {
   value => ( // value就是context中的value数据
   要显示的内容
   )
   }
   </xxxContext.Consumer>
1
2
3
4
5
6
7
8
注意: 在应用开发中一般不用context, 一般都用它的封装react插件（如，react-redux）

8.6 组件优化
Component的2个问题

只要执行setState()，即使不改变状态数据, 组件也会重新render() ==> 效率低

只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

效率高的做法

只有当组件的state或props数据发生改变时才重新render()

原因

Component中的shouldComponentUpdate()总是返回true

解决

办法1: 重写shouldComponentUpdate()方法
比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false

shouldComponentUpdate(nextProps,nextState){
       // console.log(this.props,this.state); //目前的props和state
       // console.log(nextProps,nextState); //接下要变化的目标props，目标state
       return !this.state.carName === nextState.carName
   }
1
2
3
4
5
办法2: 使用PureComponent
PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true

import React, { PureComponent } from 'react'
//之前是import React, { Component } from 'react'
1
2
注意:
1. PureComponent，只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false
2. 不要直接修改state数据, 而是要产生新数据（新对象）。所以不能用unshift
5. 项目中一般使用PureComponent来优化

8.7 render props
8.7.1 如何向组件内部动态传入带内容的结构(标签)?
Vue中:
使用slot（插槽）技术, 也就是通过组件标签体传入结构

<A><B/></A>
1
React中：
使用children props：通过组件标签体传入结构
使用render props：通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

8.7.2 children props
<A>
</B>
</A>
{this.props.children}
1
2
3
4
问题: 如果B组件需要A组件内的数据, ==> 做不到

8.7.3 render props
<A render={(data) => <C data={data} />} />
//相当于<A render={(data) => <C data={data}></C>}></A>
1
2
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}
注意：只要组件不带内容，单标签和双标签实现效果相同（即<A></A>==<A/>）

8.8 错误边界
8.8.1 理解
错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

8.8.2 特点
只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
只适用于生产环境（build打包），而不是开发环境
8.8.3 使用方式
getDerivedStateFromError配合componentDidCatch

// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
console.log(error);
// 在render之前触发
// 返回新的state
return {
hasError: true,
};
}

componentDidCatch(error, info) {
// 统计页面的错误。发送请求发送到后台去
console.log(error, info);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
8.9 组件通信方式总结
8.9.1 组件间的关系：
父子组件
兄弟组件（非嵌套组件）
祖孙组件（跨级组件）
8.9.2 几种通信方式：
props：
1）children props
2）render props
消息订阅-发布：
pubs-sub、event等等
集中式管理：
redux、dva等等
conText:
生产者-消费者模式
8.9.2 比较好的搭配方式：
父子组件：props
兄弟组件：消息订阅-发布、集中式管理
祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)
第9章 React Router 6 快速上手
9.1 概述
React Router 以三个不同的包发布到 npm 上，它们分别为：

1）react-router: 路由的核心库，提供了很多的：组件、钩子。
2） react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等。
3） react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。

与React Router 5.x 版本相比，改变了什么？

1）内置组件的变化：移除<Switch/> ，新增 <Routes/>等。

2）语法的变化：component={About} 变为 element={<About/>}等。

3）.新增多个hook：useParams、useNavigate、useMatch等。

4）官方明确推荐函数式组件了！！！

9.2 Component
1. <BrowserRouter>

说明：<BrowserRouter> 用于包裹整个应用。

示例代码：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
<BrowserRouter>
{/* 整体结构（通常为App组件） */}
</BrowserRouter>,root
);
1
2
3
4
5
6
7
8
9
2. <HashRouter>

说明：作用与<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。
备注：6.x版本中<HashRouter>、<BrowserRouter> 的用法与 5.x 相同。
3. <Routes/> 与 <Route/>

v6版本中移出了先前的<Switch>，引入了新的替代者：<Routes>。

<Routes> 和 <Route>要配合使用，且必须要用<Routes>包裹<Route>。

<Route> 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。

<Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false）。

当URL发生变化时，<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件。

<Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

示例代码：

<Routes>
/*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/
<Route path="/login" element={<Login />}></Route>

       /*用于定义嵌套路由，home是一级路由，对应的路径/home*/
<Route path="home" element={<Home />}>
/*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/
<Route path="test1" element={<Test/>}></Route>
<Route path="test2" element={<Test2/>}></Route>
    </Route>

       //Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx
<Route path="users">
<Route path="xxx" element={<Demo />} />
</Route>
</Routes>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
4. <Link>

作用: 修改URL，且不发送网络请求（路由链接）。

注意: 外侧需要用<BrowserRouter>或<HashRouter>包裹。

示例代码：

import { Link } from "react-router-dom";

function Test() {
return (
<div>
<Link to="/路径">按钮</Link>
</div>
);
}
1
2
3
4
5
6
7
8
9
5. <NavLink>

作用: 与<Link>组件类似，且可实现导航的“高亮”效果。

示例代码：

// 注意: NavLink默认类名是active，下面是指定自定义的className

//自定义样式
<NavLink
to="login"
className={({ isActive }) => {
console.log('home', isActive)
return isActive ? 'base one' : 'base'
}}
>login</NavLink>

/*
默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，
当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
*/
<NavLink to="home" end >home</NavLink>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
注意：默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。

6. <Navigate>

作用：只要<Navigate>组件被渲染，就会修改路径，切换视图。

replace属性用于控制跳转模式（push 或 replace，默认是push）。

示例代码：

import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'

export default function Home() {
   const [sum,setSum] = useState(1)
   return (
       <div>
           <h3>我是Home的内容</h3>
           {/* 根据sum的值决定是否切换视图 */}
           {sum === 1 ? <h4>sum的值为{sum}</h4> : <Navigate to="/about" replace={true}/>}
           <button onClick={()=>setSum(2)}>点我将sum变为2</button>
       </div>
   )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
7. <Outlet>

当<Route>产生嵌套时，渲染其对应的后续子路由。

示例代码：

//根据路由表生成对应的路由规则
const element = useRoutes([
{
path:'/about',
element:<About/>
},
{
path:'/home',
element:<Home/>,
children:[
{
path:'news',
element:<News/>
},
{
path:'message',
element:<Message/>,
}
]
}
])

//Home.js
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'

export default function Home() {
   return (
       <div>
           <h2>Home组件内容</h2>
           <div>
               <ul className="nav nav-tabs">
                   <li>
                       <NavLink className="list-group-item" to="news">News</NavLink>
                   </li>
                   <li>
                       <NavLink className="list-group-item" to="message">Message</NavLink>
                   </li>
               </ul>
               {/* 指定路由组件呈现的位置 */}
               <Outlet />
           </div>
       </div>
   )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
9.3 Hooks
1-6常用

1. useRoutes()

作用：根据路由表，动态创建<Routes>和<Route>。

示例代码：

//路由表配置：src/routes/index.js
import About from '../pages/About'
import Home from '../pages/Home'
import {Navigate} from 'react-router-dom'

export default [
   {
       path:'/about',
       element:<About/>
       children：[ //子路由
       {
       path:'news',
       element:<News/>
       }
       ]
   },
   {
       path:'/home',
       element:<Home/>
   },
   {
       path:'/',
       element:<Navigate to="/about"/>
   }
]

//App.jsx
import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'

export default function App() {
   //根据路由表生成对应的路由规则
   const element = useRoutes(routes) //一级路由用useRoutes()和element定位，子路由用<outlet />定位
   return (
       <div>
           ......
{/* 注册路由 */}
{element}
       ......
       </div>
   )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
注意：一级路由（App.js中）用useRoutes()和element定位，子路由用<outlet />定位

2. useNavigate()

作用：返回一个函数用来实现编程式导航。

示例代码：

import React from 'react'
import {useNavigate} from 'react-router-dom'

export default function Demo() {
const navigate = useNavigate()
const handle = () => {
//第一种使用方式：指定具体的路径
navigate('/login', {
replace: false,
state: {a:1, b:2}
})
//第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法
navigate(-1)
}

return (
<div>
<button onClick={handle}>按钮</button>
</div>
)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
3. useParams()

作用：回当前匹配路由的params参数，类似于5.x中的match.params。

示例代码：

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
import User from './pages/User.jsx'

function ProfilePage() {
// 获取URL中携带过来的params参数
let { id } = useParams();
}

function App() {
return (
<Routes>
<Route path="users/:id" element={<User />}/>
</Routes>
);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
4. useSearchParams(search，setSearch)

作用：用于读取和修改当前位置的 URL 中的查询字符串。

返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

示例代码：

import React from 'react'
import {useSearchParams} from 'react-router-dom'

export default function Detail() {
   const [search,setSearch] = useSearchParams()
   const id = search.get('id')
   const title = search.get('title')
   const content = search.get('content')
   return (
       <ul>
           <li>
               <button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数</button>
           </li>
           <li>消息编号：{id}</li>
           <li>消息标题：{title}</li>
           <li>消息内容：{content}</li>
       </ul>
   )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
5. useLocation()

作用：获取当前 location 信息，对标5.x中的路由组件的location属性。可以传递state参数

示例代码：

import React from 'react'
import {useLocation} from 'react-router-dom'

export default function Detail() {
const {state:{id,title,content}} = useLocation()
   //const x = useLocation()
   //console.log('@',x)
// x就是location对象:
   /*
       {
hash: "",
key: "ah9nv6sz",
pathname: "/login",
search: "?name=zs&age=18",
state: {a: 1, b: 2}
}
   */
   return (
       <ul>
           <li>消息编号：{id}</li>
           <li>消息标题：{title}</li>
           <li>消息内容：{content}</li>
       </ul>
   )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
6. useMatch()

作用：返回当前匹配信息，对标5.x中的路由组件的match属性。

示例代码：

export default function Login() {
const match = useMatch('/login/:x/:y')
console.log(match) //输出match对象
//match对象内容如下：
/*
   {
params: {x: '1', y: '10'}
pathname: "/LoGin/1/10"
pathnameBase: "/LoGin/1/10"
pattern: {
   path: '/login/:x/:y',
   caseSensitive: false,
   end: false
}
}
*/
return (
   <div>
<h1>Login</h1>
</div>
)
}