面试 React 框架八股文十问十答第六期

面试 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 组件的状态注入过程:

  1. 定义 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;
  2. 创建 Store: 使用 Redux 的 createStore 函数创建一个存储应用状态的 Store。

    tsx 复制代码
    // store.js
    import { createStore } from 'redux';
    import counterReducer from './reducer';
    
    const store = createStore(counterReducer);
    
    export default store;
  3. 连接 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);
  4. 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 中的状态,并在状态发生变化时重新渲染。mapStateToPropsmapDispatchToProps 函数则定义了如何映射状态和动作到组件的属性中。

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,然后根据需要执行相应的操作。

    tsx 复制代码
    componentDidUpdate(prevProps) {
      if (this.props.someProp !== prevProps.someProp) {
        // 执行相应的操作
      }
    }
  • getDerivedStateFromProps: 这是另一个生命周期方法,在组件每次渲染前调用。可以在这个方法中返回一个新的状态对象,该对象将用于更新组件的状态。

    tsx 复制代码
    static getDerivedStateFromProps(nextProps, prevState) {
      if (nextProps.someProp !== prevState.someProp) {
        return { someState: nextProps.someProp };
      }
      return null;
    }
  • 使用 useEffect 钩子: 使用 useEffect 钩子监测 props 的变化,并在变化时执行相应的操作。

    tsx 复制代码
    import 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):
    1. constructor: 初始化组件的状态和绑定事件处理函数。
    2. static getDerivedStateFromProps: 在组件每次渲染前调用,用于根据 props 更新 state
    3. render: 渲染组件的 UI。
    4. componentDidMount: 组件挂载后调用,通常用于执行一次性的操作,如数据获取。
  • 更新阶段(Updating):
    1. static getDerivedStateFromProps: 同挂载阶段,但在每次更新前都会调用。
    2. shouldComponentUpdate: 控制组件是否需要重新渲染,优化性能。
    3. render: 重新

开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star!

⭐点赞⭐收藏⭐不迷路!⭐

相关推荐
哟哟耶耶几秒前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v4 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫5 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.11 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
测试19981 小时前
2024软件测试面试热点问题
自动化测试·软件测试·python·测试工具·面试·职场和发展·压力测试
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
马剑威(威哥爱编程)2 小时前
MongoDB面试专题33道解析
数据库·mongodb·面试