[React] react-interview-01

1.render 函数中 return 若是没有使用()会有什么问题？

咱们在使用 JSX 语法书写 react 代码时，babel 会将 JSX 语法编译成 js，同时会在每行自动添加分号（；），若是 return 后换行了，那么就会变成 return；

渲染没有返回任何内容。这一般意味着缺乏 return 语句。或者，为了避免渲染，返回 null。

为了代码可读性咱们通常会在 return 后面添加括号这样代码能够折行书写，不然就在 return 后面紧跟着语句.

错误

const Nav = () => {
  return
    <nav className="c_navbar">
      { some jsx magic here }
    </nav>
}

2.componentWillUpdate 能够直接修改 state 的值吗？

react 组件在每次须要从新渲染时候都会调用 componentWillUpdate(),

例如，咱们调用 this.setState()时候

在这个函数中咱们之因此不调用 this.setState()是由于该方法会触发另外一个 componentWillUpdate(),若是咱们 componentWillUpdate()中触发状态更改,咱们将以无限循环.

3.什么渲染劫持？

首先，什么是渲染劫持：渲染劫持的概念是控制组件从另外一个组件输出的能力，固然这个概念通常和 react 中的高阶组件（HOC）放在一块儿解释比较有明了。

高阶组件能够在 render 函数中作很是多的操做，从而控制原组件的渲染输出，只要改变了原组件的渲染，咱们都将它称之为一种渲染劫持。

实际上，在高阶组件中，组合渲染和条件渲染都是渲染劫持的一种，经过反向继承，不只能够实现以上两点，还能够加强由原组件 render 函数产生的 React 元素。

实际的操做中 经过 操做 state、props 均可以实现渲染劫持

4.React Intl

react-intl 实现 React 国际化多语言

5.说说 Context 有哪些属性？

新版本的 context api 中 经常使用的只有 Provider 和 Consumer 两个对象

6.怎么使用 Context 开发组件？

import React, {Component} from 'react'

// 首先建立一个 context 对象这里命名为：ThemeContext
const ThemeContext = React.createContext('light')

// 建立一个祖先组件组件 内部使用Provier 这个对象建立一个组件 其中 value 属性是真实传递的属性
class App extends Component {
  render () {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    )
  }
}

// 渲染 button 组件的外层包裹的属性
function Toolbar () {
  return (
    <div>
      <ThemeButton />
    </div>
  )
}
// 在 Toolbar 中渲染的button 组件 返回一个 consumer （消费者）将组件组件的 value 值跨组件传递给 // ThemeButton 组件
function ThemeButton (props) {
  return (
    <ThemeContext.Consumer>
      { theme => <button {...props} theme={theme}>{theme}</button> }
    </ThemeContext.Consumer>
  )
}

7.为何 React 并不推荐咱们优先考虑使用 Context？

• Context 目前还处于实验阶段，可能会在后面的发行版本中有很大的变化，事实上这种状况已经发生了，因此为了不给从此升级带来大的影响和麻烦，不建议在 app 中使用 context。
• 尽管不建议在 app 中使用 context，可是独有组件而言，因为影响范围小于 app，若是能够作到高内聚，不破坏组件树之间的依赖关系，能够考虑使用 context
• 对于组件之间的数据通讯或者状态管理，有效使用 props 或者 state 解决，而后再考虑使用第三方的成熟库进行解决，以上的方法都不是最佳的方案的时候，在考虑 context。
• context 的更新须要经过 setState()触发，可是这并非很可靠的，Context 支持跨组件的访问，可是若是中间的子组件经过一些方法不影响更新，好比 shouldComponentUpdate() 返回 false 那么不能保证 Context 的更新必定可使用 Context 的子组件，所以，Context 的可靠性须要关注。

8.React15 和 16 别支持 IE 几以上？

React15 版本不直接支持 IE8 浏览器的，官方文档中说 React16 中依赖于集合类型 Map 和 Set 所以再也不支持 IE 11 如下的浏览器，若是想要支持，须要使用全局的 polyfill

9.举例说明 React 的插槽有哪些运用场景？

对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式，但你须要子组件可以在视觉上 “跳出(break out)” 其容器。例如，对话框、hovercards 以及提示框。因此通常 react 组件里的模态框，就是这样实现的

10.你有用过 React 的插槽(Portals)吗？怎么用？

• 首先简单的介绍下 react 中的插槽（Portals），经过 ReactDOM.createPortal(child, container)建立，是 ReactDOM 提供的接口，能够实现将子节点渲染到父组件 DOM 层次结构以外的 DOM 节点。
• 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 片断(fragment)。第二个参数（container）则是一个 DOM 元素。
• 对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式，但你须要子组件可以在视觉上 “跳出(break out)” 其容器。例如，对话框、hovercards 以及提示框。因此通常 react 组件里的模态框，就是这样实现的。

11.React 的严格模式有什么用处？

react 的 strictMode 是一个突出显示应用程序中潜在问题的工具，与 Fragment 同样，strictMode 不会渲染任何的可见 UI，它为其后代元素触发额外的检查和警告。

注意：严格模式仅在开发模式下运行，它们不会影响生产构建

能够为程序的任何部分使用严格模式

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

在上述的示例中，不会对 Header 和 Footer 组件运行严格模式检查。可是，ComponentOne 和 ComponentTwo 以及它们的全部后代元素都将进行检查。

StrictMode 目前有助于：

• 识别不安全的生命周期
• 关于使用过期字符串 ref API 的警告
• 关于使用废弃的 findDOMNode 方法的警告
• 检测意外的反作用
• 检测过期的 context API

题目和答案来源于 [react 每日 3 问]](https://github.com/haizlin/fe-interview/blob/master/lib/React.md)