字节前端必会react面试题

React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

在 React 中渲染集合时，向每个重复的元素添加关键字对于帮助React跟踪元素与数据之间的关联非常重要。key 应该是唯一ID，最好是 UUID 或收集项中的其他唯一字符串：

<ul>
  {
   todos.map((todo) =>
    <li key={
   todo.id}>
      {
   todo.text}
    </li>
  )};
</ul>

在集合中添加和删除项目时，不使用键或将索引用作键会导致奇怪的行为。

diff算法?

• 把树形结构按照层级分解，只比较同级元素。
• 给列表结构的每个单元添加唯一的key属性，方便比较。
• React 只会匹配相同 class 的 component（这里面的class指的是组件的名字）
• 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 - dirty.到每一个事件循环结束, React 检查所有标记 dirty的 component重新绘制.
• 选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能

父子组件的通信方式？

父组件向子组件通信：父组件通过 props 向子组件传递需要的信息。

// 子组件: Child
const Child = props =>{
   
  return <p>{
   props.name}</p>
}
// 父组件 Parent
const Parent = ()=>{
   
    return <Child name="react"></Child>
}

子组件向父组件通信：: props+回调的方式。

// 子组件: Child
const Child = props =>{
   
  const cb = msg =>{
   
      return ()=>{
   
          props.callback(msg)
      }
  }
  return (
      <button onClick={
   cb("你好!")}>你好</button>
  )
}
// 父组件 Parent
class Parent extends Component {
   
    callback(msg){
   
        console.log(msg)
    }
    render(){
   
        return <Child callback={
   this.callback.bind(this)}></Child>    
    }
}

React-Router的路由有几种模式？

React-Router 支持使用 hash（对应 HashRouter）和 browser（对应 BrowserRouter） 两种路由规则， react-router-dom 提供了 BrowserRouter 和 HashRouter 两个组件来实现应用的 UI 和 URL 同步：

• BrowserRouter 创建的 URL 格式：xxx.com/path
• HashRouter 创建的 URL 格式：xxx.com/#/path

（1）BrowserRouter

它使用 HTML5 提供的 history API（pushState、replaceState 和 popstate 事件）来保持 UI 和 URL 的同步。由此可以看出，BrowserRouter 是使用 HTML 5 的 history API 来控制路由跳转的：

<BrowserRouter
    basename={
   string}
    forceRefresh={
   bool}
    getUserConfirmation={
   func}
    keyLength={
   number}
/>

其中的属性如下：

• basename 所有路由的基准 URL。basename 的正确格式是前面有一个前导斜杠，但不能有尾部斜杠；

<BrowserRouter basename="/calendar">
    <Link to="/today" />
</BrowserRouter>

等同于

<a href="/calendar/today" />

• forceRefresh 如果为 true，在导航的过程中整个页面将会刷新。一般情况下，只有在不支持 HTML5 history API 的浏览器中使用此功能；
• getUserConfirmation 用于确认导航的函数，默认使用 window.confirm。例如，当从 /a 导航至 /b 时，会使用默认的 confirm 函数弹出一个提示，用户点击确定后才进行导航，否则不做任何处理；

// 这是默认的确认函数
const getConfirmation = (message, callback) => {
   
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}
<BrowserRouter getUserConfirmation={
   getConfirmation} />

需要配合<Prompt> 一起使用。

• KeyLength 用来设置 Location.Key 的长度。

（2）HashRouter

使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。由此可以看出，HashRouter 是通过 URL 的 hash 属性来控制路由跳转的：

<HashRouter
    basename={
   string}
    getUserConfirmation={
   func}
    hashType={
   string}  
/>

其参数如下：

• basename, getUserConfirmation 和 BrowserRouter 功能一样；
• hashType window.location.hash 使用的 hash 类型，有如下几种：
  • slash - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops；
  • noslash - 后面没有斜杠，例如 # 和 #sunshine/lollipops；
  • hashbang - Google 风格的 ajax crawlable，例如 #!/ 和 #!/sunshine/lollipops。

用户不同权限 可以查看不同的页面 如何实现？

1. Js方式
   根据用户权限类型，把菜单配置成json, 没有权限的直接不显示
2. react-router 方式 在route 标签上 添加onEnter事件，进入路由之前替换到首页

<Route path="/home" component={
   App} onEnter={
   (nexState,replace)=>{
   
      if(nexState.location.pathname!=='/'){
   
         var  sid = UtilsMoudle.getSidFromUrl(nexState);
         if(!sid){
   
            replace("/")
         }else{
   
            console.log(sid);
         }
      }
    }}>

3. 自己封装一个privateRouter组件 里面判断是否有权限，有的话返回
   
   没有权限的话component 返回一个提示信息的组件。

4. 扩展一下，如果是根据用权限来判断是否隐藏组件该怎么做呢？
   react 可以使用高阶组件，在高阶组件里面判断是否有权限，然后判断是否返回组件，无权限返回null
   vue 可以使用自定义指令，如果没有权限移除组件

// 需要在入口处添加自定义权限指令v-auth，显示可操作组件
Vue.directive('auth', {
   
    bind: function<