React的class组件及属性详解！

原创

Learn-anything.cn

发布于 2021-11-28 06:27:27

2.6K0

发布于 2021-11-28 06:27:27

文章被收录于专栏：learn-anything.cnlearn-anything.cn

一、class组件

React 有两种组件：class组件和函数组件。class组件需要继承 React.Component，用法如下：

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

1、必须要重写的方法

每一个继承 React.Component 的组件，都必须重写 render() 方法。

2、组合而非继承

React建议：不要创建自定义基类组件，使用组合而非继承的方式写组件。

二、组件生命周期

1、方法运行图谱

2、挂载

当组件实例被创建并插入 DOM 中时，调用顺序如下：

- constructor()

在组件挂载前被调用，使用方法及注意点如下：

constructor(props) {
    // 1、一定要写这句，否则会出现  this.props  未定义bug。
    super(props);

    // 2、构造函数是唯一能给state初始化的地方，但不要调用 this.setState() 赋值，
    // 会触发render()方法，引起不必要的bug。
    this.state = { counter: 0 };

    // 3、这里可以绑定组件的 事件处理函数
    this.handleClick = this.handleClick.bind(this);
}

- static getDerivedStateFromProps()

功能是：根据 props 的变化来更新 state。

// 初始挂载及后续更新时都会被调用，
static getDerivedStateFromProps(props, state)

- render()

- componentDidMount()

【调用】：会在组件挂载后（插入 DOM 树中）被调用；
【使用】：适合于 数据初始化操作、 网络请求获取数据操作 。
【注意】：这里调用 setState()，会触发render()，请谨慎使用，容易导致性能问题。

3、更新

当组件的 props 或 state 发生变化时会触发更新。调用顺序如下：

- static getDerivedStateFromProps()

功能是：根据 props 的变化来更新 state。

// 初始挂载及后续更新时都会被调用，
static getDerivedStateFromProps(props, state)

- shouldComponentUpdate()

此方法仅用于性能优化。返回true，表示组件需要重新渲染；返回false，表示跳过渲染，默认返回值为 true。

首次渲染或使用 forceUpdate() 时不会调用。
state 或 props 改变时，shouldComponentUpdate() 会在渲染执行之前被调用。
不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率，且会损害性能。

- render()

- getSnapshotBeforeUpdate()

在组件发生更改之前获取一些信息（譬如：滚动位置等），返回值将作为参数传递给 componentDidUpdate()

// 函数原型
getSnapshotBeforeUpdate(prevProps, prevState)

// 使用实例
class ScrollingList extends React.Component {
    constructor(props) {
        super(props);
        this.listRef = React.createRef();
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        // 我们是否在 list 中添加新的 items ？
        // 捕获滚动位置以便我们稍后调整滚动位置。
        if (prevProps.list.length < this.props.list.length) {
            const list = this.listRef.current;
            return list.scrollHeight - list.scrollTop;
        }
        return null;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        // 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
        // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
        //（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
        if (snapshot !== null) {
            const list = this.listRef.current;
            list.scrollTop = list.scrollHeight - snapshot;
        }
    }

    render() {
        return (
            <div ref={this.listRef}>{/* ...contents... */}</div>
        );
    }
}

- componentDidUpdate()

组件更新后会被调用，首次渲染不会执行此方法。
可以执行一些自定义操作，譬如进行一些网络数据请求。

componentDidUpdate(prevProps) {
    // 典型用法（不要忘记比较 props）：
    if (this.props.userID !== prevProps.userID) {
        this.fetchData(this.props.userID);
    }
}

可以调用 setState()，但是一定要用条件语句包裹 setState()，否则渲染会进入死循环，因为setState会触发render()，render()后又会调用componentDidUpdate。请谨慎使用。
如果 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()。

4、卸载

- componentWillUnmount()

当组件从 DOM 中移除时（卸载及销毁之前）调用。
在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

5、错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

- static getDerivedStateFromError()

在渲染阶段，后代组件抛出错误后被调用。

// 函数原型
static getDerivedStateFromError(error)

// 使用示例
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染显示自定义错误UI
        return { hasError: true };
    }

    render() {
        if (this.state.hasError) {
            // 你可以渲染任何自定义的  UI
            return <h1>Something went wrong.</h1>;
        }

        return this.props.children;
    }
}

- componentDidCatch()

// 后代组件抛出错误后被调用，可用于写错误日志

// 函数原型
componentDidCatch(error, info)
// error : 抛出的错误；
// info  : 错误的堆栈信息

// 使用示例
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染可以显示降级 UI
        return { hasError: true };
    }

    componentDidCatch(error, info) {
        // "组件堆栈" 例子:
        //   in ComponentThatThrows (created by App)
        //   in ErrorBoundary (created by App)
        //   in div (created by App)
        //   in App
        logComponentStackToMyService(info.componentStack);
    }

    render() {
        if (this.state.hasError) {
            // 你可以渲染任何自定义的降级 UI
            return <h1>Something went wrong.</h1>;
        }

        return this.props.children;
    }
}

6、属性

- defaultProps

为 props 添加默认值。

class CustomButton extends React.Component {
    // ...
}

CustomButton.defaultProps = {
    color: 'blue'
};

render() {
    return <CustomButton />; // props.color 将设置为 'blue'
}

- displayName

字符串类型，多用于调试消息。

- props

组件的内置属性，可用于组件间的属性数据传递。this.props.children ：特指子组件。详细用法，看这里！

- state

组件内置属性，它是一个普通 JavaScript 对象，用于组件内表示随时会发生变化的数据。详细用法，看这里！

7、其他

- setState()

函数原型

setState(updater, [callback])

updater：如下两种使用方式

// 用函数方式：
this.setState((state, props) => {
    return { counter: state.counter + props.step };
});

// 用对象方式：
this.setState({ quantity: 2 })

callback参数：组件更新完成后进行的回调，不建议使用，应该把操作放在 componentDidUpdate() 中更合适。

- forceUpdate()

强制调用 render() 进行重新渲染，会跳过 shouldComponentUpdate()，但其子组件会不会跳过。通常应该避免使用此方法。

// 函数原型
component.forceUpdate(callback)

三、参考链接：

React的class组件及属性详解！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

登录后参与评论

0 条评论

热度

React的class组件及属性详解！

React的class组件及属性详解！

一、class组件

1、必须要重写的方法

2、组合而非继承

二、组件生命周期

1、方法运行图谱

2、挂载

- constructor()

- static getDerivedStateFromProps()

- render()

- componentDidMount()

3、更新

- static getDerivedStateFromProps()

- shouldComponentUpdate()

- render()

- getSnapshotBeforeUpdate()

- componentDidUpdate()

4、卸载

- componentWillUnmount()

5、错误处理

- static getDerivedStateFromError()

- componentDidCatch()

6、属性

- defaultProps

- displayName

- props

- state

7、其他

- setState()

- forceUpdate()

三、参考链接：

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐