react指北

vousmevoyez0613

已于 2023-03-20 10:37:52 修改

阅读量677

点赞数

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

于 2021-11-24 21:21:42 首次发布

本文链接：https://blog.csdn.net/acm_cn1234567890/article/details/121525428

版权

前端专栏收录该内容

48 篇文章 2 订阅

订阅专栏

react全家桶

react基础【16.4+】
react-router【v4+】
react-hooks
mobx【状态管理，大多数公司都是使用redux】
swr【1.1+】
linaria【3.0+】
ant design【蚂蚁金服的ui框架】
bizcharts【可视化插件】 — 官网

react-native【用于开发移动端原生应用】
react VR【用于虚拟现实技术的开发】

1. react基础

react 16.4+ 基础

2. react原理

1. setState()方法异步更新数据

setState()方法异步更新数据

可以调用任意多次setState()方法，只会触发一次重新渲染

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
    this.kkk = this.kkk.bind(this);
  }

  handle() {
    this.setState({
      count: this.state.count + 1
    });
    console.log(this.state.count);
    this.setState({
      count: this.state.count + 1
    });
    console.log(this.state.count);
  }

  render() {
    console.log("cn---lll");
    return (
      <div className="App">
        <h1 onClick={this.handle}>加1</h1>
      </div>
    );
  }
}

setState设计为异步的原因：
可以显著的提升性能，如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的。最好的办法应该是获取到多个更新，之后进行批量更新。

setState()方法推荐使用的语法

setState((prevstate, props)=>{})
state表示目前为止最新的state
props表示目前为止最新的props

this.state = {
  count: 0
};
this.setState({count: this.state.count + 1});
this.setState((prevState, props) => {
  console.log(prevState) // count: 1
  return {
    count: prevState.count + 1
  }
})

setState()方法的第二个参数-----状态更新之后立即执行的一个回调函数

setState((state, props)=>{},()=>{// 该回调函数会在状态更新之后，并且render()调用之后立即执行})

面试题：setState怎么获取到更新后得值

1.setState()方法的第二个参数
2.利用setTimeout()
setState是一个异步方法，由队列实现。它有Batch模式(批量更新模式)和普通模式。
普通模式下,setState能够即时更新state。
Batch模式下，在 React 的生命周期以及绑定的事件流中，所有的 setState 操作会先缓存到一个队列中，在整个事件结束后或者 mount 流程结束后，才会取出之前缓存的 setState 队列进行一次计算，触发 state 更新。setState 的执行时机是早于微任务与宏任务的。
setTimeout/setInterval就是一个强制使用普通模式的方法，它打破了React 对 setState 的掌控，可以立即更新state。
this.state = {
  count: 0
}
setTimeout(() => {
  this.setState({value:this.state.value+1});
  console.log(this.state.value); // 1
},0)

class Example extends React.Component{
    constructor(){
    super(...arguments)
        this.state = {
            count: 0
        };
    }
    componentDidMount(){
      this.setState({count: this.state.count + 1});
      console.log('1:' + this.state.count)
      this.setState({count: this.state.count + 1});
      console.log('2:' + this.state.count)
      setTimeout(() => {
        this.setState({count: this.state.count + 1});
        console.log('3:' + this.state.count)
      }, 0)
      this.setState(preState => ({ count: preState.count + 1 }), () => {
        console.log('4:' + this.state.count)
      })
      console.log('5:' + this.state.count)
      this.setState(preState => ({ count: preState.count + 1 }))
      console.log('6:' + this.state.count)
    }
}
面试题：
1:0
2:0
5:0
6:0
4:3
3:4

2. jsx语法的转化过程

jsx是createElement()方法的语法糖
jsx语法被@babel/preset-react插件编译为createElement()方法，最终转化为虚拟DOM
hhhh

3. 组件更新机制

当组件重新渲染时，会重新渲染当前组件及其所有子组件

4. 组件性能优化

1. 减轻state

减轻state:state中只存储跟组件渲染有关的数据，不做渲染的数据不存在state中
组件中多个方法公用的数据存在this中

2. 避免不必要的重新渲染

组件更新机制：
当组件重新渲染时，会重新渲染当前组件及其所有子组件
问题：
子组件没有任何变化也会被重新渲染
解决：
使用shouldComponentUpdata(nextProps, nextState)，该钩子函数返回true则组件重新渲染，返回false不重新渲染

5. 虚拟DOM和diff算法

在react中实现部分更新-----虚拟DOM配合Diff算法

1. 虚拟DOM

虚拟DOM:本质上就是一个js对象，用来描述HTML结构

2. react执行过程

初次渲染时，React会根据初始state(model)和jsx结构，创建一个虚拟DOM对象（树）【虚拟DOM生成的时机：组件在调用render方法后，根据状态和jsx结构生成虚拟DOM对象，因此render方法调用并不意味着浏览器中的重新渲染，而是要进行生成新的虚拟DOM,进行Diff，最终重新渲染更新内容的过程】
根据虚拟DOM生成真正的DOM，渲染到页面中
当数据变化后(setState())，重新根据新的数据，创建新的虚拟DOM对象（树）
与旧的虚拟DOM对象，使用Diff算法对比，得到需要更新的内容
最后，React只将变化的内容更新到（Patch算法）DOM中，重新渲染到页面上。

在这里插入图片描述