第五课之初步认识react
课程回顾
开发环境和生产环境
开发环境和生产环境有很多通用的代码，可以将通用的代码提取出来，例如loaders，output等，所以可以形成三个文件，webpack.prod.config.js、webpack.dev.config.js、webpack.common.config.js,分离出来如何将他们分别合并，这时候就需要使用到webpack-merge，进行配置合并
课程内容
- 1.课程回顾
- 2.react介绍
- 3.react安装
- 4.生命周期、事件、数据流讲解
- 5.父子组件传值
1.什么是React
React是Facebook推出的一个JavaScript库，它的口号就是“用来创建用户界面的JavaScript库”，所以它只是和用户界面打交道，可以把它看成MVC中的V（视图）层。
为什么使用react
- 虚拟dom效率性能高，不需要操作dom（频繁操作dom很消耗性能）
- 使用组件化开发方式，高复用、维护容易，逻辑清晰
- 技术成熟，社区完善，插件齐全，适用于大型Web项目（生态系统健全），由Facebook专门的团队维护，技术支持可靠，是现在最主流的技术之一
- 全局单向数据流，数据流向清晰，大型项目不在话下
组件化
- 每一个ReactJS文件都是一个组件，含视图、逻辑操作、数据
- 复用、封装性强
单向数据流
- 子组件对于父组件传递过来的数据是【只读】的，不能直接更新父组件数据、这样组件更加简单易把握、只会在父组件修改数据，追查问题的时候可以跟快捷
- 顶层组件某个props改变会递归遍历整棵组件树，重新渲染使用这个属性的插件
虚拟dom
- React的设计中，开发者基本上无需操纵实际的DOM节点，每个React组件都是用Virtual DOM渲染的。
- 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树
- 新的虚拟 DOM 与原来的虚拟 DOM进行比对时，它会进行同层比较，即相同的节点层进行比较，如果不同则直接将原始虚拟 DOM 中该节点层及以下的节点全部删除，重新生成新的虚拟 DOM 节点，而不会继续向下比对
jsx
- JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。
- React.js 可以用 JSX 来描述你的组件长什么样的。
- JSX 在编译的时候会变成相应的 JavaScript 对象描述。
- react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。
// 第一步：jsx代码
<button className="btn btn-blue">
<em>Confirm</em>
</button>
// 第二步解析成对象
{
type: 'button',
props: {
className: 'btn btn-blue',
children: {
type: 'em',
props: {
children: 'Confirm'
}
}
}
}
// 第三步：根据对象创建标签
// 参数1：元素名称
// 参数2：元素属性对象(null表示无)
// 参数3：当前元素的子元素string||createElement() 的返回值
React.createElement("button", {
className: "btn btn-blue"
},React.createElement("em", null, "Confirm"))
// 第四步：渲染
ReactDOM.render(dom, document.getElementById('app'))
key
-
例如：在遍历数据时，推荐在组件中使用 key 属性
-
循环需要加key：你在 JSX 模板中遍历 state 中某个数据时，为什么不加 key 值浏览器会报警告，这是因为你不再遍历的每条数据加上 key 值，更改 state 中那条数据的值，生成虚拟 DOM 后，React 就不知道原始遍历的数据和这次更新后遍历的数据一一对应的关系，就会再次重新渲染，而加上 key 值，它则能迅速比对出有差异的部分进行部分的更新。
-
为什么不建议用 index 作为 key 值：因为当你插入、 删除中间的数据时，从改变的那个数据开始，后续每个数据的 index 值就会变，从而就导致了每个数据的 key 值相应变化了，这样依旧会引起大规模渲染，这就是其中的原因
-
流程图
虚拟dom、jsx
- 从 JSX 到页面到底经过了什么样的过程：
2.react安装
// 第一步：安装react react-dom，以及jsx编译
npm i -D react react-dom @babel/preset-react
// 第二步：.babelrc添加
"presets": [
"@babel/env",
"@babel/react"
],
// 第三步：添加react.js
// 1. 导入 react
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
// 由于react实现机制，组件名称必须要大写
class MyComponet extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
// 此处注释的写法
<button className="btn btn-blue">
<em>Confirm</em>
</button>
)
}
}
// 第四步：渲染
// 参数1：虚拟dom对象 参数2：dom对象表示渲染到哪个元素内 参数3：回调函数
ReactDOM.render(<MyComponet />, document.getElementById('root'))
// 第五步：修改入口文件
entry: './src/js/react.js', //指定打包的入口文件
- 组件名称命名用大驼峰
- 如果在 JSX 中给元素添加类, 需要使用 className 代替 class
- 在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可
生命周期
- 挂载卸载过程
- constructor()：React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
- componentWillMount()：它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时
- componentDidMount()：组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
- componentWillUnmount ()：在此处完成组件的卸载和数据的销毁。（移除计时器）
- 更新过程
- componentWillReceiveProps (nextProps)：接受一个参数nextProps，通过对比nextProps和this.props是否改变，判断要做的操作，只要父组件改变都会造成子组件componentWillReceiveProps接收，也会增加组件的重绘次数，浪费性能，写法不好容易死循环
- shouldComponentUpdate(nextProps,nextState)：主要用于性能优化(阻止组件渲染)，因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断
- componentWillUpdate (nextProps,nextState)：shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。
- componentDidUpdate(prevProps,prevState)：react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state
- render()：render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染
- React新增的生命周期
- getDerivedStateFromProps(nextProps, prevState)：代替componentWillReceiveProps()，获取props并修改state
- getSnapshotBeforeUpdate(prevProps, prevState)：一般的用法就是获取更新前的DOM
- React17版本废弃的生命周期
- componentWillMount
- componentWillReceiveProps（可以用getDerivedStateFromProps和componentDidUpdate搭配使用替代）
- componentWillUpdate
修改后的生命周期
// 之前
componentWillReceiveProps(nextProps) {
if (nextProps.isLogin !== this.props.isLogin) {
this.setState({
isLogin: nextProps.isLogin,
});
this.handleClose();
}
}
// 现在
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.isLogin !== prevState.isLogin) {
return {
isLogin: nextProps.isLogin,
};
}
return null;
}
componentDidUpdate(prevProps, prevState) {
if (prevState.isLogin !== this.state.isLogin) {
this.handleClose();
}
}
使用方式
class MyComponet extends Component {
constructor(props) {
super(props);
this.state = {};
}
// 日常使用的生命周期
// 新增的生命周期
static getDerivedStateFromProps(nextProps, prevState) {
console.log('判断前后两个 props 是否相同------getDerivedStateFromProps')
return null;
}
componentDidUpdate() {
console.log('数据已经更新---------componentDidUpdate')
}
// 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
componentDidMount() {
console.log('组件加载后--------componentDidMount')
}
// 即将废弃
// componentWillReceiveProps(nextProps) {
// console.log('接收props--------componentWillReceiveProps')
// }
// 性能优化
// 你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。
shouldComponentUpdate(nextProps, nextState){
// 值没有发生过变化，不需要重新触发render
if(nextState.Number == this.state.Number){
return false
}
}
render() {
return (
// 此处注释的写法
<button className="btn btn-blue">
<em>Confirm</em>
</button>
)
}
}
render(不要在render里setState)
- 一个组件类必须要实现一个 render 方法。
- 这个 render 方法必须要返回一个 JSX 元素。
- 必须要用一个外层的 JSX 元素把所有内容包裹起来。
// 错误
render () {
return (
<div>第一个</div>
<div>第二个</div>
)
}
// 正确
render () {
return (
<div>
<div>第一个</div>
<div>第二个</div>
</div>
)
}
react事件
// 绑定事件，this指向会改变所以我们通过代码控制不改变this的指向
// 写法一：构造函数里绑定事件，效率高
constructor(props) {
super(props);
this.state = {};
this.showInfo = this.showInfo.bind(this);
}
showInfo() {
console.log(2312321)
}
<button className="btn btn-blue" onClick={this.showInfo}>
<em>Confirm</em>
</button>
// 写法二：使用bind this
showInfo() {
console.log(2312321)
}
<button className="btn btn-blue" onClick={this.showInfo.bind(this)}>
<em>Confirm</em>
</button>
// 写法三:方法使用箭头函数，this指向不会改变，简单易用，效率高，建议使用
showInfo=()=> {
console.log(2312321)
}
<button className="btn btn-blue" onClick={this.showInfo}>
<em>Confirm</em>
</button>
// 写法四:在标签上调用函数，每次渲染会调用，不建议使用
<button className="btn btn-blue" onClick={()=>this.showInfo()}>
<em>Confirm</em>
</button>
数据讲解
1.state：内部定义，它只是用来控制这个组件本身自己的状态，页面渲染通过setState进行完成。
2.setState:
- 当我们调用这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上
- React.js为了批次与效能并不会马上修改state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。
// 想要即时获得改变后的state
// 方案一:使用回调函数
this.setState({ val: this.state.val + 1 }, () => {
console.log(this.state.val);
})
// 方案二:setTimeout是异步方法，react无法直到开发者异步方法中想要渲染的顺序，所以在异步方法中调用setTimeout，react会即时渲染，不会使用批量更新
setTimeout(_ => {
this.setState({
num: ++num
})
console.log(this.state.num);
}, 0)
3.props：外部传入，包括父子组件之间的通信，全局数据流的传递
- 父子组件之间的通信，子组件无法直接修改父组件的props,通过this.props接收
- 全局数据流的传递（dva）
父子组件传值
- 父组件使用子组件并添加属性进行传值
- 子组件接收属性或者方法
- 实现父组件state的使用，以及子组件props的使用
案例
// 第一步：添加一个子组件ChildCom.js,组件首字母大写
import React, { Component } from 'react'
export default class ChildCom extends Component {
constructor(props) {
super(props);
this.state = {
};
}
clickBtn = () => {
// 使用父组件的方法
this.props.addChildNum();
}
render() {
// 使用父组件的值
const { childNum } = this.props;
return (
<div>
<div>子组件值：{childNum}</div>
<button onClick={this.clickBtn}>子组件点击调用父组件方法</button>
</div>
)
}
}
// 第二步父组件添加
// 1. 导入 react
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
// 导入子组件
import ChildCom from './ChildCom';
// 2. 创建 虚拟DOM
// 参数1：元素名称 参数2：元素属性对象(null表示无) 参数3：当前元素的子元素string||createElement() 的返回值
class MyComponet extends Component {
constructor(props) {
super(props);
this.state = {
num: 1,
childNum: 1,
};
}
...
addNum = () => {
let { num } = this.state;
this.setState({
num: ++num
})
}
addChildNum = () => {
let { childNum } = this.state;
this.setState({
childNum: ++childNum
})
}
render() {
const { num, childNum } = this.state;
return (
<div>
<div>父组件值：{num}</div>
<button className="btn btn-blue" onClick={this.addNum}>
<em>Confirm</em>
</button>
<ChildCom childNum={childNum} addChildNum={this.addChildNum} />
</div>
)
}
}
ref
不借助插件的情况下，react中如何获取获取dom节点
方式一
使用原生js，需要在componentDidMount（组件渲染完成后获取）
// 原生js获取获取dom节点
document.getElementById('');
~
~
~
方式二
react提供的一个特殊的属性ref，可以绑定到render()输出的任何组件上，这个特殊的属性允许你引用 render() 返回的相应的dom节点
// 第一步：添加ref属性
<input value={num} ref="myIpt" readOnly />
// 第二步：获取节点
getDom = () => {
var dom = this.refs.myIpt;
dom.style.background='red';
dom.focus();
}
父组件如何获取子组件的数据（props,state,event）
// 第一步：父组件使用并子组件添加onRef={(child) => this.child = child}（可以取别的名字）
// 作用是设置当前父组件的this.child等于返回的对象
<ChildCom childNum={childNum} addChildNum={this.addChildNum} onRef={(child) => this.child = child} />
// 第二步：子组件ChildCom添加
componentDidMount() {
// 将child传递给this.props.onRef()方法
this.props.onRef && this.props.onRef(this);
}
// 第三步父组件使用
console.log(this.child); // ChildCom {props: {…}, context: {…}, refs: {…}, updater: {…}, clickBtn: ƒ, …}
- 百分之99的情况在不使用ref的情况下，react都能进行完成，频繁的dom操作是比较消耗性能的，所以在任何不需要ref去操作页面数据的的情况下，都不要使用ref去操作dom
