React高级指引(3)

Reconciliation（协调）

对比算法

当对比两棵树，React首先比较两个根节点

当根节点变化，React将卸载旧树并重新构建新树

Context

Context通过组件树提供一个传递数据的方法，从而避免了在每一个层级手动的传递props属性
Content设计的目的是为了共享那些被认为对于一个组件树而言是"全局"的数据

// 创建一个 theme Context
const ThemeContext = React.createContext('light')
function ThemedButton(props){
  // ThemeButton 组件从context接收 theme
  return (
    <ThemeContext.Consumer>
      {theme=><Button {...props} theme={theme} />}
    </ThemeContext.Consumer>
  )
}
// 中间件
function ToolBar(props) {
  return (
    <div> <ThemedButton />></div>
  )
}
class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value='dark'>
        <ToolBar />
      </ThemeContent.Provider>
    )
  }
}

API

React.createContent

const { Provider, Consumer } = React.createContent(defaultValue)

创建一对 { Provider, Consumer }。当 React 渲染 context 组件 Consumer 时，它将从组件树的上层中最接近的匹配的 Provider 读取当前的 context 值。
如果上层的组件树没有一个匹配的 Provider，而此时你需要渲染一个 Consumer 组件，那么你可以用到 defaultValue 。这有助于在不封装它们的情况下对组件进行测试。

Fragments

React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点
Fragments 看起来像空的 JSX 标签： <></>

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

因为React元素必须使用div标签包裹，针对有些特定的标签，比如<tr>中必须是<td>,而不应该是

<tr>
  <div>
      <td></td>
      <td></td>
   </div>
</tr>

带 key 的 Fragments

<></>语法不能接受键值或熟悉
如果要使用的话，使用 <React.Fragment />

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，将会触发一个key警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Portals

Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。

ReactDOM.createPortals(child, container)
// 第一个参数child是任何可渲染的React子元素，第二个参数则是一个DOM元素

Error Boundaries （错误边界）

类似JavaScript try...catch,处理错误机制,针对React组件使用
componentDidCatch(error, info)

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

未捕获错误的新行为

这一改变有非常重要的意义。自 React 16 开始，任何未被错误边界捕获的错误将会卸载整个 React 组件树。

错误边界无法捕获事件处理器中的错误

可以使用 try/catch 语句

Web Components

高阶组件

类似高阶函数，接收一个组件，并返回一个新组件

Render Props

是指一种在React组件之间使用一个值为函数的prop在React组件间共享代码的简单技术

<DataProvider render={data => (
    <h1>Hello {data.target}</h1>
)} />