【React】—常见面试题总结(一)

001、react中如何创建一个组件

方案一：ES6写法

class 组件名称 extends Component{ }

方案二：ES5写法

var App = React.createClass({})

002、render函数什么时候会执行？

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

003、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在执行的过程中还需要被合并

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

1、自定义属性

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

2、限制外部数据的类型

a、引入propTypes第三方模块

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

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

BrowserRouter

HashRouter

withRouter

Route

Link

NavLink

Switch

Redirect

BrowserRouter 和 HashRouter是路由的根组件，跟组件下面只能有一个子元素

Route是路由路径所对应的组件

Link 和 NavLink是进行路由的跳转。区别是当选中标签的时候NavLink会加上一个class

Swicth:被Switch包裹的Route渲染的时候只会渲染一个路径，建意：子页面不要放在Switch里面，主页面放在Switch里面

Redirect：设置路由的重定向

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

渲染方式有2种

1、<Route path="/home" component={组件名称}></Route>

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


2、<Route path="/home"  render={()=>{
        return <Home/>
    }}></Route>

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

007、如何控制路由的路径完全匹配

给NavLink 或者 Route设置 exact属性

008、react中路由传递参数的方法有哪些？

方案一：
//通过params进行传值

 <Router path="/one/:id" render={(history)=>{
  return <One history={history}/>
  }}>

// html跳转：
<NavLikn to={"/one/"+1}>one<NavLink>

// js跳转：
this.props.history.push(  '/one/'+'1'  )


// 接收值：
在组件内部通过constructor参数进行接受
    constructor({history,location,match}){
        super();
        /进行接受
        console.log(match.params)
    }

// 方案二：
// 通过query
{
return
}}>

// html跳转：
    <NavLikn to={{
        pathname:"/one",
        query:{data:1}
    }}>one<NavLink>

// js跳转：
this.props.history.push({ pathname : '/one' ,query : { data: 1} })

// 获取值
this.props.location.query.data

注意：如果通过render进行渲染的时候需要在回调中将history的值传递过去.如果是component进行渲染的话，我们只需要通过this.props进行接受即可。

009、react中的编程式导航方法有哪些？

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

this.props.history.back();返回

this.props.history.forward():前进

this.props.history.replace():替换

010、react中的生命周期有哪些？

(1)、组件创建的过程
constructor

componentWillMount

render

componentDidMount

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

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

(3)组件销毁的时候
componentWillUnmount

011、reatc中如何强制更新DOM

this.foreUpdate()

012、谈谈你对react生命周期中shouldComponentUpdate的理解

shouldComponentUpdate是react性能优化非常重要的一环。
组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和
state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生
成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，
节省大量性能，尤其是在dom结构复杂的时候

013、谈谈你对虚拟DOM的理解，以及好处？

虚拟DOM：虚拟DOM其实就是真实的js对象

虚拟DOM提高了react的性能，每次数据更新后都会重新计算上虚拟DOM，并和上一
次的虚拟DOM进行对比，对方法变化的部分进行批量更新。react中也提供了
shouldComponentUpdate生命周期的回调，来减少数据变化后不必要的虚拟DOM对
比过程。保证性能

014、谈谈你对flux的理解

利用单项数据流的方式来组合react的视图组件，它是一种模式，而不是一种框架

简单来说flux可以帮我们解决非父子组件之间传值

flux数据传递流程
https://www.cnblogs.com/nanianqiming/p/9870194.html

015、react17废除的生命周期函数，与新增的生命周期函数

由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数
　　componentWillMount
　　componentWillRecieveProps
　　componentWIllUpdate
　　
新增的生命周期

static getDerivedStateFromProps(nextProps, prevState) {}

用于替换componentWillReceiveProps，可以用来控制 props 更新 state
的过程；它返回一个对象表示新的 state；如果不需要更新，返回 null 即
可在每次渲染之前都会调用，不管初始挂载还是后面的更新都会调用，这一点
和componentWillReceiveProps不同（只有当父组件造成重新渲染时才调用）
每次都应该返回一个对象作为

getSnapshotBeforeUpdate() {}

用于替换 componentWillUpdate，该函数会在update后 DOM 更新前被调用，
用于读取最新的 DOM 数据，返回值将作为 componentDidUpdate 的第三个参
数,在最新的渲染数据提交给DOM前会立即调用，它让你在组件的数据可能要改
变之前获取他们

componendDidCatch(error, info){}

如果一个组件定义了componentDidCatch生命周期，则他将成为一个错误边
界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造
函数中的错误，就像使用了try catch，不会将错误直接抛出了，保证应用的
可用性)

016、this.setState之后react做了哪些操作

1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate

017、当组件的key值发生改变后会执行哪些生命周期函数？

1、componentWillUnmount
2、constructor
3、componentWillMount
4、render
5、componentDidMount

018、在react中是否封装过组件？封装组件需要注意的地方？

常用封装组件用到的东西
1、propTypes 限制外部数据的类型
2、defaultProps 设置默认的外部数据
3、父传子 子传父 context 等传值方式
4、高阶组件

封装组件的时候一定要注意组件的复用性，灵活性

019、如何接收组件内部的标签/内容

通过this.props.children

020、请说下你对redux的理解，以及使用的方式

其实redux就是Flux的一种进阶实现。它是一个应用数据流框架,
主要作用应用状态的管理

redux的三大原则
1、单一的数据源
2、state是只读的
3、使用纯函数来进行修改

redux中有3个常用的方法
1、createStore() 创建store
2、combineReducers() 合并多个reducer
3、applyMiddleware() 使用中间件，处理异步的action

redux数据传递的流程
当组件需要改变Store数据的时候。需要创建一个Action,然后通过
dispatch(action) 传递给Store，然后Store把Action转发给Reducers.
Reducers会拿到previousState(以前的state数据) 和action。然后将
previousState和action进行结合做新的数据(store)修改。然后生成一个
新的数据传递给Store 。Store通过触发subscribe()这个方法来调用函数
执行setState使得view的视图发生改变

持续更新！！！