前端react面试题（边面边更）

最新推荐文章于 2024-09-03 12:38:42 发布

beifeng11996

最新推荐文章于 2024-09-03 12:38:42 发布

阅读量289

点赞数

文章标签：前端框架 reactjs

本文链接：https://blog.csdn.net/beifeng11996/article/details/129186153

版权

本文详细探讨了React开发中的关键概念，包括展示组件与容器组件的区别、高阶组件的应用、Redux中间件的工作原理、React组件的props.children与React.Children的差异，以及React-Router的配置方法。此外，还涵盖了React的diff算法、Hooks的优势以及如何在React中处理状态和props。文章深入浅出地解析了React开发中的难点，有助于面试准备。

摘要由CSDN通过智能技术生成

展示组件(Presentational component)和容器组件(Container component)之间有何不同

展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。

容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。

高阶组件的应用场景

权限控制

利用高阶组件的 条件渲染 特性可以对页面进行权限控制，权限控制一般分为两个维度：页面级别 和 页面元素级别

// HOC.js    
function withAdminAuth(WrappedComponent) {
       
    return class extends React.Component {
       
        state = {
       
            isAdmin: false,    
        }    
        async componentWillMount() {
       
            const currentRole = await getCurrentUserRole();    
            this.setState({
       
                isAdmin: currentRole === 'Admin',    
            });    
        }    
        render() {
       
            if (this.state.isAdmin) {
       
                return <WrappedComponent {
   ...this.props} />;    
            } else {
       
                return (<div>您没有权限查看该页面，请联系管理员！</div>);    
            }    
        }    
    };    
}

// 使用
// pages/page-a.js    
class PageA extends React.Component {
       
    constructor(props) {
       
        super(props);    
        // something here...    
    }    
    componentWillMount() {
       
        // fetching data    
    }    
    render() {
       
        // render page with data    
    }    
}    
export default withAdminAuth(PageA);

可能你已经发现了，高阶组件其实就是装饰器模式在 React 中的实现：通过给函数传入一个组件（函数或类）后在函数内部对该组件（函数或类）进行功能的增强（不修改传入参数的前提下），最后返回这个组件（函数或类），即允许向一个现有的组件添加新的功能，同时又不去修改该组件，属于 包装模式(Wrapper Pattern) 的一种。

什么是装饰者模式：在不改变对象自身的前提下在程序运行期间动态的给对象添加一些额外的属性或行为

可以提高代码的复用性和灵活性。

再对高阶组件进行一个小小的总结：

高阶组件 不是组件，是一个把某个组件转换成另一个组件的函数
高阶组件的主要作用是 代码复用
高阶组件是 装饰器模式在 React 中的实现

封装组件的原则

封装原则

1、单一原则：负责单一的页面渲染

2、多重职责：负责多重职责，获取数据，复用逻辑，页面渲染等

3、明确接受参数：必选，非必选，参数尽量设置以_开头，避免变量重复

4、可扩展：需求变动能够及时调整，不影响之前代码

5、代码逻辑清晰

6、封装的组件必须具有高性能，低耦合的特性

7、组件具有单一职责：封装业务组件或者基础组件，如果不能给这个组件起一个有意义的名字，证明这个组件承担的职责可能不够单一，需要继续抽组件，直到它可以是一个独立的组件即可

Redux 中间件是什么？接受几个参数？柯里化函数两端的参数具体是什么？

Redux 的中间件提供的是位于 action 被发起之后，到达 reducer 之前的扩展点，换而言之，原本 view -→> action -> reducer -> store 的数据流加上中间件后变成了 view -> action -> middleware -> reducer -> store ，在这一环节可以做一些"副作用"的操作，如异步请求、打印日志等。

applyMiddleware源码：

export default function applyMiddleware(...middlewares) {
   
    return createStore => (...args) => {
   
        // 利用传入的createStore和reducer和创建一个store
        const store = createStore(...args)
        let dispatch = () => {
   
            throw new Error()
        }
        const middlewareAPI = {
   
            getState: store