react面试题——面试必备

Posted 2021-07-18 老张在线敲代码

1. context 在函数组件中与类组件中分别是如何获取并使用的？

    类组件：const context=React.createContext()
    页面使用：<context.Provider value={themes.dark}><Home/></context.Provider>
    子组件使用<context.Consumer> {()=>{}} </context.Consumer>
    hooks：context=React.createContext()
    使用：

```jsx
    <context.Provider value={themes.dark}>
    	<Home/>
    </context.Provider>
	子组件：:const context=useContext(context)

2. 路由直系页面可以直接使用 history,那非直系，隔代页面中如何使用路由相关信息？

 withRouter

3. 三列布局，左右分别为宽为 200px,中间自适应，要求使用三种以上方法实现！

定位 浮动 flex

4. 浏览器兼容性问题有哪些？（css、js）

• img 下面白边
• a 下划线
• li 父级有边框浏览器不同可能在边框外面也可能在边框里面

5. 如何实现一个元素垂直水平居中，用三种以上代码实现？

定位(定位中有俩种方法：一种是直接定位，一种是配合css3中的transform：translateY加具体的高度来实现垂直居中)flex

6. 在使用 react 项目开发时，你们是如何与后端进行接口联调的？

通过代理发送请求，然后ajax+axios获取请求数据看数据能不能用

7. 在我们使用 mobx 时，我们在具体页面中如何使用 mobx 中的 state，如何操作 setState?

 @withRouter
    @inject("first")
    @observa
    this.props.first.定义的名称
    通过@action 进行数据改写
    使用 this.porps.first.事件名称调用

8. 在使用 redux 如何修改 state，通过什么方法实现，分别是什么？

通过 reducer 返回一个新数据，使用 action 进行改变 state，用 dispatch 操作了具体 action

9. 在 redux 中 action 是做什么用的？如何书写？

action 是改变 state 的

10. 在 redux 中如何实现一个 ajax 请求？

通过 Actions 中进行 ajax 请求
11. React中事件this邦定的实现方法有哪些?

①在constructor中绑定this

②在调用时直接绑定.bind(this)

③函数直接以箭头函数形式

④调用时用箭头函数形式

12. 已知对象obj,ajax返回一个后如何合并原有对象，使用至少两种方法实现！

{...obj,...ajax} Object.assign(obj,ajax)

13. 如何将两个或多个组件嵌入到一个组件中？

用div或者<React.Fragment></React.Fragment>标签包裹

14. 路由中NavLink 与Link什么区别？

NavLink使用时会产生一个active的类名可以用于进行高亮或当前样式的显示。

15. 如何在组件更新时再发起一个ajax 请求，在更新时需要注意什么？

在ComponentDidUpdata中写ajax请求，需要注意的是，为了防止死循环，需要加一个if判断，满足条件时再发起请求。

16. 路由直系页面可以直接使用history,那非直系，隔代页面中如何使用路由相关信息？

使用withRouter将非直系包裹。

17.hooks的出现给react带来了什么好处?

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性