与更早的版本相比,React 16 在组件生命周期方法上做了哪些调整或改动?
考察说明
考查对 React 16 生命周期变更的理解,包括废弃、新增及原因。
回答思路
- 【回答框架 1】React 16 主要废弃了 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 这三个生命周期方法,并引入了 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 作为替代。
- 【回答框架 2】废弃原因是这些方法在异步渲染下容易被误用,导致不一致或性能问题。getDerivedStateFromProps 是一个静态方法,用于在每次渲染前根据 props 派生 state,替代 componentWillReceiveProps;getSnapshotBeforeUpdate 在 DOM 更新前读取信息,用于替代 componentWillUpdate,返回值会作为 componentDidUpdate 的第三个参数。
- 【回答框架 3】此外,componentDidMount、componentDidUpdate 和 componentWillUnmount 仍然保留,但 componentWillMount 被替换为在 constructor 中初始化,或使用 componentDidMount 进行副作用操作。
- 【回答框架 4】React 17 进一步移除了这些已废弃的生命周期,因此在实际开发中应使用新的生命周期方法。
- 【关键点 1】React 16 废弃了 componentWillMount、componentWillReceiveProps、componentWillUpdate。
- 【关键点 2】新增 getDerivedStateFromProps 和 getSnapshotBeforeUpdate。
- 【关键点 3】废弃原因是为异步渲染准备,避免副作用和不一致。
- 【易错点 1】不要将 getDerivedStateFromProps 与 componentWillReceiveProps 混用,它无法访问 this 且每次渲染都会调用。
- 【易错点 2】getSnapshotBeforeUpdate 必须与 componentDidUpdate 配合使用,否则返回值会丢失。
- 【易错点 3】在 React 17 中仍使用废弃方法会触发警告,应尽早迁移。