web前端 react 经典面试题（一）

1. 请说下在react中如何处理异步的action

通过applyMiddleware来使用中间件来处理action

常用的中间件

​ reduxpromisemiddleware

​ reduxthunk

​ reduxsaga

2. render函数什么时候会执行？

当this.state 或者 this.props发生改变的时候render函数就会执行

3. react中如何对state中的数据进行修改？setState为什么是一个异步的

修改数据通过this.setState(参数1,参数2)

this.setState是一个异步函数

• 参数1 : 是需要修改的数据是一个对象

• 参数2 : 是一个回调函数，可以用来验证数据是否修改成功，同时可以获取到数据更新后的DOM结构 等同于componentDidMount

• this.setState中的第一个参数除了可以写成一个对象以外，还可以写成一个函数，函数中第一个值为prevState 第二个值为prePprops this.setState((prevState,prop)=({}))

为什么setState是一个异步的？

​ 当批量执行state的时候可以让DOM渲染的更快,也就是说多个setstate在执行的过程中还需要被合并

4. react中如何定义自定义属性，以及限制外部数据的类型

1. 自定义属性

   ​ 组件名称.defaultProps= { key:val }

2. 限制外部数据的类型

   引入propTypes第三方模块

   类型限制 组件名称.propTypes = { key:propTypes.类型 }

5. react路由常用的一些组件配置项有哪些？

• BrowserRouter
• HashRouter
• withRouterRoute
• Link
• NavLink
• Switch
• Redirect

6. reatc路由中Route渲染组件的方法有哪几种？区别是什么？

渲染方式有2种

​ <Route path="/home" component={组件名称}</Route

• 通过component进行组件的渲染，这种方式的优点在于可以直接在组件的内部接受到history、location、match,缺点在于如果需要组件传参，或者渲染jsx语法的时候无法使用

​ <Route path="/home" render={()={ return <Home/ }}</Route

• 通过render进行渲染组件，优点在于可以进行组件传参，还可以渲染非组件的标签，缺点在于如果需要使用 histroy location match的话需要在函数中传递过去

7. 如何控制路由的路径完全匹配

给NavLink 或者 Route设置 exact属性

8. react中路由传递参数的方法有哪些？

1. 动态路由传参数

2. query传值

9. react中的编程式导航方法有哪些？

this.props.history.push(“需要跳转的路径”)；

this.props.history.back()

this.props.history.forward()

this.props.history.replace()

10. react中的生命周期有哪些？

(1) 组件创建的过程

• constructor
• componentWillMount
• render
• componentDidMount

(2) 当props中的数据发生改变后会执行哪些生命周期函数

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

(3) 组件销毁的时候

• componentWillUnmount