React使用过程中的坑

chenjixue

已于 2024-02-02 00:01:55 修改

阅读量640

点赞数

文章标签： react.js 前端 javascript

于 2023-01-03 16:06:21 首次发布

本文链接：https://blog.csdn.net/chenjixue/article/details/128430629

版权

1.生命周期中需要注意的

componentWillMount

如果React使用了服务端渲染时，该生命周期会在服务端和客户端分别调用一次，造成里面的代码逻辑重复执行。

render函数

render函数应该是个纯函数不应该有其他副作用比如setState()或者绑定事件，

原因如下

1）render函数在每次渲染时都会被调用，而setState会触发渲染会照成死循环。

2）而在render调用注册事件，每次组件一渲染就会调用注册事件

componentDidMount

componentDidMount在游览器端会在绘制真实dom之后调用，但在react native场景下componentDidMount受机器性能影响并不意味这真是的dom也绘制完成，视图很有可能还在绘制中。

2.更新阶段需要注意的

componentWillReceiveProps可被getPropsDriverState替代，另外getPropsDriverState存在时componentWillReceiveProps不会被调用。

什么时候会触发重新渲染，渲染中发生报错要怎么处理

1).函数组件

函数组件在任何时候都会重新渲染，但官方提供了一种优化方式React.memo

2)class组件

不实现shouldComponentUpdate函数，有两种情况触发重新渲染

(1)当state发生变化时

(2)当props重新传入时候（无论props是否发生变化）

3)错误边界

错误边界是一种组件这种组件可以打印其子组件数任何位置的js的错误并且会渲染出备用UI

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            hasError: false
        }
    }
    static getDerivedStateFromError(error) {
        return {
            hasError: true
        }
    }
    componentDidCatch(error,errorInfo){
        //做一些错误日志例如上传到服务器
        logErrorToMyService(error,errorInfo)
    }
    render(){
        if(this.state.hasError){
            return <h1>Something went wrong</h1>
        }
        return <div>content</div>
    }
}

用了两个函数

getDerivedStateFromError用来处理当前的state状态，用于UI降级

componentDidCatch去捕获报错的具体类型，一般线上页面报错监控时候用到，渲染报错只能通过componentDidCatch捕获。

3.类组件和函数组件的区别

函数组件每一次执行都是一次全新函数的调用，会重新创建函数内部变量，内部函数等，由于js闭包机制的存在，这些变量会每个创建的函数作用域内单独维护，例如在更新前调用的setTimeout函数使用的变量如props是更新前函数作用域的。组件更新之后的props值又是一个新的函数作用域并不会影响会影响更新之前调用setTimeout函数中props变量的值

类组件每次更新并不会创建新的实例，组件事件函数调用this.state和this.props都是当前state和props是什么值那就是什么值,不存在像函数组件那样的闭包效果。

上代码：

首先函数组件和类组件都设置一个延迟2秒的setTimeout,然后点击这个两个组件,同时我在两秒之类让父亲组件改变传入子组件的user属性

父组件：