react面试笔录
react面试总结
react内容
1.生命周期
生命周期：
1、mounting挂载阶段
1、constructor
2、componentWillMount
3、render
4、componentDidMount
2、updating更新阶段
props:
1、componentWillReceiveProps(nextProps):接收到新的属性时（未更新）触发的钩子。nextProps接收到的最新的属性。
2、shouldComponentUpdate(nextProps,nextState):判断是否要更新你的数据（属性，状态），必须要提供一个布尔返回值，true更新，false不更新
3、componentWillUpdate(nextProps,nextState):更新数据之前next是要更新内容
4、render();
5、componentDidUpdate(preProps,preState):更新数据之后 pre是更新完成之前的内容。
state:
1、shouldComponentUpdate(nextProps,nextState):判断是否要更新你的数据（属性，状态），必须要提供一个布尔返回值，true更新，false不更新
2、componentWillUpdate(nextProps,nextState):更新数据之前next是要更新内容
3、render();
4、componentDidUpdate(preProps,preState):更新数据之后 pre是更新完成之前的内容。
3、unmounting卸载阶段
componentWillUnmount
2.路由的基本用法：
Navlink：
to：指定的是跳转的地址
exact：值是一个布尔值，用于是否为精确匹配
activeStyle：选中style样式
activeClassName：选中的样式
Route：
path：地址，当你的地址与该属性相同时，会使用该路由下的组件
component：指定组件
exact：是否精确匹配
BrowserRouter：
basename:为路由增加前缀
forceRefresh:是一个布尔值，用于强制刷新，当你每跳转一次路由，即要与你的服务器进行请求
3. 路由传值的三种方式：
1、设置path
<Router>
<nav>
<NavLink to={"/ONE/1/2"} activeStyle={{color:"red"}}>ONE</NavLink>
</nav>
<Switch>
<Route path={"/one/:a/:b"} component={One}></Route>
</Switch>
</Router>
接收：
this.props.match.params.a
this.props.match.params.b
优点：
刷新数据还在
缺点：
不能够直接传递对象。
2.query
在你的NavLink属性to的值设为对象。将你要传递的参数作为该对象的属性。
<Router>
<nav>
<NavLink to={{
pathname:"/two",
xixi:"haha",
query:{
a:1,
b:2
}
}} activeStyle={{color:"red"}}>Two</NavLink>
</nav>
<Switch>
<Route path={"/two"} component={Two}></Route>
</Switch>
</Router>
接收：
this.props.location.query.a
this.props.location.query.b
this.props.location.xixi
优点：
可以传递对象
缺点：
刷新数据丢失
3.state
<Router>
<nav>
<NavLink to={{
pathname:"/three",
state:{
c:1,
d:2
}
}}>Three</NavLink>
</nav>
<Switch>
<Route path={"/three"} component={Three}></Route>
</Switch>
</Router>
接收：
this.props.location.state.c
this.props.location.state.d
优点：
可以传递对象，刷新数据还在
缺点：
重新打开标签，数据不在。
4.为什么说虚拟dom会提高性能？
虚拟dom相当于再js和真实dom之间加了一个缓存，利用diff算法避免了没有必要的dom操作，从而提高性能；
5.受控组件和非受控组件
（表单元素是否受组件控制） 一般推荐受控组件 数量少的可以用非受控
1、受控组件
由react进行限制的表单元素称为受控组件。
1、需要将value与内部的state进行绑定。
2、配合onChange事件修改你的state,从而改变value
场景：将需要数据与视图进行同步时。
2、非受控组件
直接通过DOM操作的组件称为非受控组件
1、不需要与你的state进行绑定
2、设置ref. 通过this.refs.refname
6.高阶组件（HOC）
本质是一个函数 接收一个组件，返回一个新组件
a.在返回的新组件里渲染接收到的组件
b.将数据通过props 传递给接收到的组件
c.被高阶组件处理过的组件 一般通过props 接收数据
HOC 可以用于以下许多用例
-
代码重用、逻辑和引导抽象
-
渲染劫持
-
state 抽象和操作
-
props 处理
7.使用 React Hooks 好处是啥？
什么是react HOOKS?
Hooks是 React 16.8 中的新添加内容。它们允许在不编写类的情况下使用state和其他 React 特性。使用 Hooks，可以从组件中提取有状态逻辑，这样就可以独立地测试和重用它。Hooks 允许咱们在不改变组件层次结构的情况下重用有状态逻辑，这样在许多组件之间或与社区共享 Hooks 变得很容易。
使用的好处：
首先，Hooks 通常支持提取和重用跨多个组件通用的有状态逻辑，而无需承担高阶组件或渲染 props 的负担。Hooks 可以轻松地操作函数组件的状态，而不需要将它们转换为类组件。
Hooks 在类中不起作用，通过使用它们，咱们可以完全避免使用生命周期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount。相反，使用像useEffect这样的内置钩子。
