前端大厂最新面试题-React面试题.docx

React面试题知识点总结 React是一个流行的前端JavaScript库，用于构建用户界面。下面是 React 相关的知识点总结： 生命周期函数 React 类组件的生命周期函数可以分成三个状态：Mounting、Updating 和 Unmounting。 Mounting 阶段组件被插入到真实 DOM 中，Updating 阶段组件正在被重新渲染，Unmounting 阶段组件被移出真实 DOM。生命周期的方法有： * `componentWillMount`：在渲染前调用，在客户端和服务端都可以调用。 * `componentDidMount`：在第一次渲染后调用，只在客户端调用。可以在这个方法中调用 `setTimeout`、`setInterval` 或者发送 AJAX 请求等操作。 * `componentWillReceiveProps`：在组件接收到一个新的 prop 时被调用，不会在初始化时调用。 * `shouldComponentUpdate`：返回一个布尔值，在组件接收到新的 props 或者 state 时被调用。在初始化时或者使用 `forceUpdate` 时不被调用。 * `componentWillUpdate`：在组件接收到新的 props 或者 state 但还没有 render 时被调用，不会在初始化时调用。 * `componentDidUpdate`：在组件完成更新后立即调用，不会在初始化时调用。 * `componentWillUnmount`：在组件从 DOM 中移除之前立刻被调用。 React Context（上下文） React Context 是解决 React 父子组件之间公共数据传输的一个 API。它可以减少组件之间公共数据的重复传参和多级嵌套传参的问题。当不想使用 Redux 等太复杂的库时，可以使用 Context 上下文来管理全局状态。 使用 Context 需要创建一个 Context 对象，例如 `const ThemeContext = React.createContext('light')`。然后可以在函数式组件中使用 `Consumer` 来读取 Context 的值，例如 `<ThemeContext.Consumer>{value => <p>link's theme is {value}</p>}</ThemeContext.Consumer>`。也可以在 Class 组件中使用 `contextType` 来读取 Context 的值，例如 `static contextType = ThemeContext`。 在中间组件中不需要再传递 Context 的值，可以直接使用 Context 的值。例如 `function Toolbar(props) { return (<div><ThemedButton /><ThemeLink /></div>); }`。 React 的生命周期函数和 Context 都是非常重要的概念，需要深入了解和掌握它们的使用方法，才能更好地使用 React 构建高质量的前端应用程序。