位置: IT常识 - 正文

前端面试题整理——React考点和回答(前端面试题目100及最佳答案)

编辑：rootadmin

一、基础使用 1、变量、表达式、class style、子元素和组件 2、if else、三元表达式、逻辑运算符 && || 3、map、key 4、bind this 5、关于event参数，react的event不是原生的，event.nativeEvent才是指向原生event，所有的事件都是 ...

推荐整理分享前端面试题整理——React考点和回答(前端面试题目100及最佳答案)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端面试题整理怎么做,前端面试题目100及最佳答案,前端面试题汇总.pdf,前端面试题汇总.pdf,前端面试题汇总.pdf,前端面试题汇总.pdf,前端面试题2021及答案,前端面试题大全,内容如对您有帮助，希望把文章链接给更多的朋友！

一、基础使用

1、变量、表达式、class style、子元素和组件

2、if else、三元表达式、逻辑运算符 && ||

3、map、key

4、bind this

5、关于event参数，react的event不是原生的，event.nativeEvent才是指向原生event，所有的事件都是挂在在document上。

6、传递自定义参数，最后一个参数会自动加上event

7、受控组件，表单的值受到 this.state 的控制影响。

8、组件使用

　　（1）props 传递数据

　　（2）props 传递函数

　　（3）props 类型检查，使用prop-types插件

9、setState（重点）

　　（1）不可变值

　　不能直接修改state，使用不可变值

　　（2）可能是异步更新

　　setTimeout中的setState是同步的

　　自定义的 DOM 事件，setState是同步的

　　（3）可能会被合并

　　传入函数不会被合并

10、组件生命周期

父子组件生命周期和VUE的调用顺序是一样的。

二、React 高级特性

1、函数组件：纯函数，输入props，输出JSX

没有实例，没有生命周期，没有state，不能扩展其他方法

2、非受控组件

　　（1）ref

　　（2）defaultValue、defaultChecked

　　（3）手动操作DOM元素

非受控组件使用场景：必须手动操作DOM元素，setState实现不了，如文件上传<input type=file>、富文本编辑器

3、Portals

组件默认会按照既定层次嵌套渲染，如何让组件渲染到父组件以外？

使用react-dom中的createPortal，指定渲染dom节点位置

4、context

应用场景：从外层组件给下面所有子层传递简单参数。如设置主题、系统语言。

使用的API，如React.createContext，.Provider，.Consumer

5、异步组件

import()语法，React.lazy，React.Suspense

三、性能优化

1、shouldComponentUpdate（简称SCU）

React 默认父组件有更新，子组件则无条件也更新。

SCU默认返回true，使用SCU对props和states进行前后变化对比来确定组件进不进行渲染。

SCU必须要配合不可变值来进行，不然前后的值都是相等无法进行对比。

2、PureComponent 和 React.memo

PureComponent纯组件，在SCU中实现了浅比较

memo是函数组件中的PureComponent

3、不可变值 immutable.js

彻底拥抱不可变值，基于共享数据不是深拷贝，速度好。

有一定学习和迁移成本，按需使用。

四、组件公共逻辑的抽离

　　（1）mixin，已被React废弃

　　（2）高阶组件HOC

　　高阶组件不是一种功能，而是一种模式，类似于工厂模式。如下代码示例：

const HOCFactory = (Component) =>{class HOC extends React.Component {// 这里定义多个组件的公共逻辑render(){return <Component {...this.props} /> // 返回拼装结果}}return HOC}const c1 = HOCFactory(Component1)const c2 = HOCFactory(Component2)

　　如代码所示，传入一个组件，最后返回一个组件。方法中间定义公共逻辑。

　　Redux 的 connect 就是高阶组件。

　　（3）Render Props

　　核心思想是通过一个函数将 class 组件的 state 作为 props 传递给纯函数组件

class Factory extends React.Component {constructor(){this.state = {} // 这里的 state 是多个组件的公共逻辑的数据}// 修改staterender(){return <div>{this.props.render(this.state)}</div>}}const App = ()=>( <Factory render={ // render 是一个函数组件 (props) => <p>{props.a}{props.b}</p> }/>)

HOC：模式简单，但会增加组件层级

Render Props：代码简洁，学习成本较高

五、Redux

1、基本概念

store，通过createStore(reducer)，传入一个reducer来创建，来存放应用的状态。API有 { subscribe, dispatch, getState }

subscribe 订阅更新

dispatch 改变内部state的唯一方法，dispatch触发一个action

getState 获取state值

state，当state变化时需要返回全新的对象，坚持不可变值原则。

action，修改state值

reducer，形式为(state,action) => state 的纯函数，描述了action如何把state转变成下一个state

2、单项数据流

单项数据流代码步骤：

　　（1）dispatch(action)

　　（2）reducer => newState

　　（3）subscribe 触发通知

3、react-redux

connect

mapStateToProps

mapDispatchToProps

4、异步action

同步是直接返回一个action对象，异步就是返回函数，其中带有dispatch 参数

使用异步action还需要使用中间件创建store，例如使用redux-thunk，以及使用redux的applyMiddleware的API

如：const store = createStore(reducer,applyMiddleware(thunk))

redux-thunk、redux-promise、redux-saga等中间件都可以实现异步action

5、中间件

中间件其实就是改造dispatch，如下自己实现个简单中间件：

// 复制原来的dispatchlet next = store.dispatch// 重新定义dispatchstore.dispatch = function dispatchAndLog(action){console.log('执行中间件逻辑',action)// 然后再执行原有dispatchnext(action)console.log('执行完后执行的逻辑',store.getState())} 前端面试题整理——React考点和回答(前端面试题目100及最佳答案)