8.10学习汇总

1.上下固定，中间滚动布局如何实现

<div class="parent">
    <div class="header">header -- 固定</div>
    <div class="content">
      <p>content -- 滚动</p>
      <p>内容部分</p>
      <p>内容部分</p>
      <p>内容部分</p>
      <p>内容部分</p>
        ......
    </div>
    <div class="footer">footer -- 固定</div>
</div>

<style>
  .parent{
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #b6efff;
    text-align: center;
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  p {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #ccc;
  }

  .footer {
    height: 50px;
    line-height: 50px;
    background: #b6efff;
  }

</style>

2.什么是纯函数

一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。
一个函数执行过程对产生了外部可观察的变化那么就说这个函数是有副作用的。（比如修改了外部变量）

3.冒泡改进

设置标志位判断是否有换位。

4.react异步渲染。介绍Time Slicing 和 Suspense

Time Slicing和Suspense，主要用来对付两个问题：CPU速度和网络IO。
react的异步渲染其实就是拉长了render的时间，一次跑一点，所以机器性能很差的，会看到渲染时有稍微的延迟，但不是卡顿。
Suspense功能想解决从react出生到现在都存在的「异步副作用」的问题，
调用render函数->发现有异步请求->悬停，等待异步请求结果->再渲染展示数据

const ProfilePage = React.lazy(() => import('./ProfilePage')); // Lazy-loaded

// Show a spinner while the profile is loading
<Suspense fallback={<Spinner />}>
  <ProfilePage />
</Suspense>

5.如何设计一个localStorage，保证数据的实效性

在数据中添加时间戳，查询时带上有效时间，让localstorage中的时间与当前时间作差，与传入的有效时间对比。

6.react-route原理，怎么实现跳转

用户可以通过手动输入或者与页面进行交互来改变 URL，然后通过同步或者异步的方式向服务端发送请求获取资源（当然，资源也可能存在于本地），成功后重新绘制 UI。即保证url与视图的同步。

跳转通过<Link>标签，（Link 组件最终会渲染为 HTML 标签 ，它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截了浏览器的默认行为，然后调用了history.pushState 方法）

• 将 location 对象作为参数传入到 TransitionTo 方法中，
• 然后调用 window.location.hash 或者window.history.pushState() 修改了应用的 URL，这取决于你创建 history 对象的方式（hashHistory、browserHistory）。
• 触发onhashChange、 history.listen中注册的事件监听器，（在Router组件的componentWillMount中）
• 得到了新的 location 对象后，系统内部的 matchRoutes 方法会匹配出 Route 组件树中与当前 location 对象匹配的一个子集，并且得到了 nextState，
• 执行 this.setState(nextState) 就可以实现重新渲染 Router 组件

7.redux

7.1connect原理

它真正连接 Redux 和 React，

• 在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
• 接收Redux的store作为props，通过context对象传递给子孙组件上的connect
  connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产Component的函数(wrapWithConnect)，然后再将真正的Component作为参数传入wrapWithConnect，这样就生产出一个经过包裹的Connect组件，