#类: Component<P = { }, S = { }, SS = any>

#继承

• ComponentLifecycle<P, S, SS>

#继承于

• PureComponent

#类型参数

#构造函数

#构造函数

new Component<P = { }, S = { }, SS = any>(props: P): Component<P, S, SS>

#参数

#返回

Component<P, S, SS>

#继承自

ComponentLifecycle<P, S, SS>.constructor

#构造函数

new Component<P = { }, S = { }, SS = any>(props: P, context: any): Component<P, S, SS>

#参数

#返回

Component<P, S, SS>

#继承自

ComponentLifecycle<P, S, SS>.constructor

#属性

#context

context: unknown

如果使用 React Context，请在你的类中重新声明它， 使其成为 static contextType 的 React.ContextType。 应与类型标注或 static contextType 配合使用。

#示例

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>

#参阅

React Docs

#props

readonly props: Readonly<P>

#state

state: Readonly<S>

#contextType?

static optional contextType?: Context<any>

如果设置了该项，this.context 会在运行时被设置为给定 Context 的当前值。

#示例

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
  static contextType = Ctx
  context!: React.ContextType<typeof Ctx>
  render () {
    return <>My context's value: {this.context}</>;
  }
}

#参阅

https://react.dev/reference/react/Component#static-contexttype

#propTypes?

static optional propTypes?: any

React 会忽略该项。

#已被弃用

仅为向后兼容而保留在类型中。将在未来的主版本中移除。

#方法

#componentDidCatch()?

optional componentDidCatch(error: Error, errorInfo: ErrorInfo): void

捕获后代组件中产生的异常。未处理的异常会导致 整个组件树被卸载。

#参数

#返回

void

#继承自

ComponentLifecycle.componentDidCatch

#componentDidMount()?

optional componentDidMount(): void

在组件挂载后立即调用。在这里设置 state 会触发重新渲染。

#返回

void

#继承自

ComponentLifecycle.componentDidMount

#componentDidUpdate()?

optional componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot?: SS): void

在更新发生后立即调用。首次渲染时不会调用。

只有当 getSnapshotBeforeUpdate 存在且返回非 null 值时，该 snapshot 才会存在。

#参数

#返回

void

#继承自

ComponentLifecycle.componentDidUpdate

#componentWillMount()?

optional componentWillMount(): void

在挂载发生之前、以及 Component.render 之前立即调用。 请避免在此方法中引入任何副作用或订阅。

注意：存在 getSnapshotBeforeUpdate 或 getDerivedStateFromProps 时， 该方法不会被调用。

#返回

void

#已被弃用

16.3 版本起，请改用 componentDidMount 或构造函数；在 React 17 中将失效

#参阅

• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path

#继承自

ComponentLifecycle.componentWillMount

#componentWillReceiveProps()?

optional componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void

在组件可能会接收到新的 props 时调用。 React 即使在 props 没有变化时也可能调用此方法，因此如果只想处理变化， 请务必比较新旧 props。

调用 Component.setState 通常不会触发此方法。

注意：存在 getSnapshotBeforeUpdate 或 getDerivedStateFromProps 时， 该方法不会被调用。

#参数

#返回

void

#已被弃用

16.3 版本起，请改用静态方法 getDerivedStateFromProps；在 React 17 中将失效

#参阅

• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path

#继承自

ComponentLifecycle.componentWillReceiveProps

#componentWillUnmount()?

optional componentWillUnmount(): void

在组件被销毁之前立即调用。可以在此方法中执行必要的清理工作，例如 取消网络请求，或清理在 componentDidMount 中创建的 DOM 元素。

#返回

void

#继承自

ComponentLifecycle.componentWillUnmount

#componentWillUpdate()?

optional componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void

在接收到新的 props 或 state、即将渲染之前立即调用。首次渲染时不会调用。

注意：你不能在这里调用 Component.setState。

注意：存在 getSnapshotBeforeUpdate 或 getDerivedStateFromProps 时， 该方法不会被调用。

#参数

#返回

void

#已被弃用

16.3 版本起，请改用 getSnapshotBeforeUpdate；在 React 17 中将失效

#参阅

• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path

#继承自

ComponentLifecycle.componentWillUpdate

#forceUpdate()

forceUpdate(callback?: () => void): void

#参数

#返回

void

#getSnapshotBeforeUpdate()?

optional getSnapshotBeforeUpdate(prevProps: Readonly<P>, prevState: Readonly<S>): SS | null

在 React 把 render 的结果应用到文档之前运行，返回的对象会传给 componentDidUpdate。适用于在 render 引发变化之前，保存滚动位置等信息。

注意：存在该方法时，任何已废弃的 生命周期事件都不会执行。

#参数

#返回

SS | null

#继承自

ComponentLifecycle.getSnapshotBeforeUpdate

#render()

render(): ReactNode

#返回

ReactNode

#setState()

setState<K extends string | number | symbol>(state: S | ((prevState: Readonly<S>, props: Readonly<P>) => S | Pick<S, K> | null) | Pick<S, K> | null, callback?: () => void): void

#类型参数

#参数

#返回

void

#shouldComponentUpdate()?

optional shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean

用于判断 props 和 state 的变化是否应该触发重新渲染。

Component 始终返回 true。 PureComponent 对 props 和 state 实现了浅比较，如果任何 props 或 state 发生变化，则返回 true。

如果返回 false，则不会调用 Component.render、componentWillUpdate 和 componentDidUpdate。

#参数

#返回

boolean

#继承自

ComponentLifecycle.shouldComponentUpdate

#UNSAFE_componentWillMount()?

optional UNSAFE_componentWillMount(): void

在挂载发生之前、以及 Component.render 之前立即调用。 请避免在此方法中引入任何副作用或订阅。

该方法在 React 17 中不会停止工作。

注意：存在 getSnapshotBeforeUpdate 或 getDerivedStateFromProps 时， 该方法不会被调用。

#返回

void

#已被弃用

16.3 版本起，请改用 componentDidMount 或构造函数

#参阅

• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path

#继承自

ComponentLifecycle.UNSAFE_componentWillMount

#UNSAFE_componentWillReceiveProps()?

optional UNSAFE_componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void

在组件可能会接收到新的 props 时调用。 React 即使在 props 没有变化时也可能调用此方法，因此如果只想处理变化， 请务必比较新旧 props。

调用 Component.setState 通常不会触发此方法。

该方法在 React 17 中不会停止工作。

注意：存在 getSnapshotBeforeUpdate 或 getDerivedStateFromProps 时， 该方法不会被调用。

#参数

#返回

void

#已被弃用

16.3 版本起，请改用静态方法 getDerivedStateFromProps

#参阅

• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path

#继承自

ComponentLifecycle.UNSAFE_componentWillReceiveProps

#UNSAFE_componentWillUpdate()?

optional UNSAFE_componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void

在接收到新的 props 或 state、即将渲染之前立即调用。首次渲染时不会调用。

注意：你不能在这里调用 Component.setState。

该方法在 React 17 中不会停止工作。

注意：存在 getSnapshotBeforeUpdate 或 getDerivedStateFromProps 时， 该方法不会被调用。

#参数

#返回

void

#已被弃用

16.3 版本起，请改用 getSnapshotBeforeUpdate

#参阅

• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
• https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path

#继承自

ComponentLifecycle.UNSAFE_componentWillUpdate