面试 React 框架八股文十问十答第六期
相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!
⭐点赞⭐收藏⭐不迷路!⭐
1) React中有使用过getDefaultProps吗?它有什么作用?
getDefaultProps
是 React 类组件中的一个生命周期方法。它用于定义组件的默认属性值。在组件实例化之前,React 会调用 getDefaultProps
来获取组件的默认属性对象,然后将其用于初始化组件的属性。这个方法对于确保组件始终有合适的属性值是很有用的,尤其是在没有给定属性的情况下。
示例:
tsx
class MyComponent extends React.Component {
static defaultProps = {
color: 'blue',
size: 'medium'
};
// 或者使用 getDefaultProps 方法
static getDefaultProps() {
return {
color: 'blue',
size: 'medium'
};
}
render() {
// 在这里可以使用 this.props.color 和 this.props.size
return (
<div style={{ color: this.props.color, fontSize: this.props.size }}>
Hello, World!
</div>
);
}
}
2)React中setState的第二个参数作用是什么?
setState
的第二个参数是一个回调函数,它会在 setState
完成且组件重新渲染后被调用。这个回调函数是可选的,通常用于执行与 setState
操作相关的代码,或者在状态更新完成后执行其他逻辑。
示例:
tsx
this.setState({ count: this.state.count + 1 }, () => {
console.log('State updated and component re-rendered.');
});
3)React中的setState和replaceState的区别是什么?
在最新版本的 React 中,replaceState
已经被废弃,不再推荐使用。原先的 replaceState
用于完全替换组件的状态,而 setState
用于部分更新状态。使用 setState
更灵活,因为它可以接受一个回调函数,而 replaceState
则没有这个特性。
4)在React中组件的this.state和setState有什么区别?
this.state
是组件的当前状态,可以直接访问。但直接修改this.state
是不推荐的,应该使用setState
方法来更新状态,以确保 React 可以正确地处理状态变更并触发组件的重新渲染。setState
是用于更新组件状态的方法。它接收一个对象或函数作为参数,用于指定新的状态值。React 会将新状态与当前状态合并,然后重新渲染组件。使用函数形式的setState
可以确保基于当前状态计算新状态,避免由于异步更新导致的问题。
5)state 是怎么注入到组件的,从 reducer 到组件经历了什么样的过程
在 React 中,状态通常被管理在组件的 state
中,而 Redux 是一种常用的状态管理库,用于全局状态的管理。以下是从 Redux 的 reducer 到 React 组件的状态注入过程:
-
定义 Reducer: Reducer 是一个纯函数,接收当前状态和动作,返回新的状态。它定义了应用中的状态变化规则。
tsx// reducer.js const initialState = { counter: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, counter: state.counter + 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; default: return state; } }; export default counterReducer;
-
创建 Store: 使用 Redux 的
createStore
函数创建一个存储应用状态的 Store。tsx// store.js import { createStore } from 'redux'; import counterReducer from './reducer'; const store = createStore(counterReducer); export default store;
-
连接 React 组件: 使用
react-redux
库中的connect
函数将 React 组件连接到 Redux 的 Store。这样,组件就可以访问 Store 中的状态和派发动作。tsx// CounterComponent.js import React from 'react'; import { connect } from 'react-redux'; const CounterComponent = ({ counter, increment, decrement }) => ( <div> <p>Counter: {counter}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); const mapStateToProps = state => ({ counter: state.counter }); const mapDispatchToProps = dispatch => ({ increment: () => dispatch({ type: 'INCREMENT' }), decrement: () => dispatch({ type: 'DECREMENT' }) }); export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);
-
Provider 包裹根组件: 使用
react-redux
中的Provider
组件将整个 React 应用包裹,使其能够访问 Redux 的 Store。tsx// App.js import React from 'react'; import { Provider } from 'react-redux'; import store from './store'; import CounterComponent from './CounterComponent'; const App = () => ( <Provider store={store}> <CounterComponent /> </Provider> ); export default App;
在这个过程中,Redux 的 Store 将状态注入到 React 组件中,而 connect
函数帮助组件订阅 Store 中的状态,并在状态发生变化时重新渲染。mapStateToProps
和 mapDispatchToProps
函数则定义了如何映射状态和动作到组件的属性中。
6)React组件的state和props有什么区别?
- State:
state
是组件内部管理的状态,用于描述组件自身的状态数据。state
是可变的,可以通过this.setState()
方法进行更新。- 可以在组件内部初始化并在组件的生命周期中进行更新。
- 可以通过
this.state
访问。
- Props:
props
是从父组件传递给子组件的数据,用于组件之间的通信。props
是不可变的(只读的),子组件不能直接修改父组件传递的props
。- 数据流是单向的,即从父组件传递给子组件。
- 可以通过
this.props
访问。
7)React中的props为什么是只读的?
React中的 props
是只读的,这是为了维护数据流的单向性和提高组件的可维护性。如果子组件能够直接修改父组件传递的 props
,那么组件之间的数据流将变得不可控,难以追踪数据的变化来源,容易引发错误。
通过将 props
设定为只读,React 确保了以下好处:
- 数据流的单向性: 数据从父组件流向子组件,子组件无法直接修改传递给它的数据,保持了清晰的数据流方向。
- 组件的可预测性: 通过限制
props
的修改,可以更容易预测组件的行为。如果组件的渲染结果仅依赖于传递的props
,那么它的行为更容易理解和测试。 - 维护性: 只读的
props
降低了组件之间的耦合性,使得组件更容易维护和重用。当一个组件只关心自己的props
,它就更容易成为一个独立、可复用的单元。
8)在React中组件的props改变时更新组件的有哪些方法?
在 React 中,当组件的 props
改变时,组件可以通过以下方法进行更新:
-
componentDidUpdate: 这是一个生命周期方法,当组件完成更新后调用。可以在这个方法中比较前后的
props
,然后根据需要执行相应的操作。tsxcomponentDidUpdate(prevProps) { if (this.props.someProp !== prevProps.someProp) { // 执行相应的操作 } }
-
getDerivedStateFromProps: 这是另一个生命周期方法,在组件每次渲染前调用。可以在这个方法中返回一个新的状态对象,该对象将用于更新组件的状态。
tsxstatic getDerivedStateFromProps(nextProps, prevState) { if (nextProps.someProp !== prevState.someProp) { return { someState: nextProps.someProp }; } return null; }
-
使用 useEffect 钩子: 使用
useEffect
钩子监测props
的变化,并在变化时执行相应的操作。tsximport React, { useEffect } from 'react'; function MyComponent(props) { useEffect(() => { // 执行相应的操作 }, [props.someProp]); }
9)React中怎么检验props?验证props的目的是什么?
在 React 中,可以使用 prop-types
库对组件的 props
进行类型检查。这有助于捕获潜在的bug,提高代码的可维护性和可靠性。prop-types
提供了一系列的类型检查器,可以用于确保传递给组件的 props
符合预期的类型。
使用示例:
tsx
import PropTypes from 'prop-types';
function MyComponent(props) {
// ...
}
MyComponent.propTypes = {
someProp: PropTypes.string.isRequired,
anotherProp: PropTypes.number
};
目的:
- 类型验证: 确保传递给组件的
props
具有正确的类型,避免由于类型错误而引起的运行时错误。 - 可读性和文档: 在组件的
propTypes
中定义了期望的props
类型后,不仅提供了代码的自文档化,也可以作为组件的文档。其他开发者可以清晰地看到组件期望接收的props
类型。 - 预防性编程: 通过检验
props
,可以在组件接收到不正确的数据类型时提前发现问题,有助于进行预防性编程,降低 bug 出现的可能性。
10)React的生命周期有哪些?
在 React 16.3 之前,React 的生命周期包括三个阶段:Mounting(挂载)、Updating(更新)、Unmounting(卸载)。但自 React 16.3 版本开始,推荐使用新的生命周期方法,具体生命周期如下:
- 挂载阶段(Mounting):
- constructor: 初始化组件的状态和绑定事件处理函数。
- static getDerivedStateFromProps: 在组件每次渲染前调用,用于根据
props
更新state
。 - render: 渲染组件的 UI。
- componentDidMount: 组件挂载后调用,通常用于执行一次性的操作,如数据获取。
- 更新阶段(Updating):
- static getDerivedStateFromProps: 同挂载阶段,但在每次更新前都会调用。
- shouldComponentUpdate: 控制组件是否需要重新渲染,优化性能。
- render: 重新
开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star!
⭐点赞⭐收藏⭐不迷路!⭐