从React 15到React 16

就像人们对移动应用程序和操作系统的更新感到兴奋一样,开发人员也应该对使用的框架更新感到兴奋。 各个框架的新版本给我们带来开箱即用的新功能和技巧。

以下是将现有应用从React 15迁移到React 16时应考虑的一些优秀功能。

我们是时候对React15说再见了 👋

错误处理

React 16 引入了错误边界的新概念。

错误边界是捕获子组件树中任意位置javascript错误的react组件。他们记录这些错误,并且渲染备用的UI,而不是崩溃的组件树。错误边界可以在渲染期间,生命周期方法,以及它们下面的整个树的构造函数中捕获错误。

如果一个类组件定义一个名为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;
  }
}

接下来,你可以把它当做一个普通的组件来用。

<ErrorBoundary>  
   <MyWidget />
</ErrorBoundary>

componentDidCatch()方法的工作类似于JavaScript catch {}块,但对于组件。只有类组件可以是错误边界。实际上,大多数情况下,您只需要声明一次错误边界组件。然后你就可以在整个应用程序中使用它。

需要注意的是,错误边界只捕获其下面组件的错误。错误边界不能够捕获自身的错误,如果错误边界尝试渲染错误信息失败,那么错误将传播到其上方最近的错误边界,这一点,也类似于catch{}块在javaScript中的工作方式。

查看一个演示: https://codepen.io/gaearon/pe...有关错误处理的更多信息,可访问error-handling-in-react-16

新的渲染返回类型: fragments(片段)和strings(字符串)

摆脱渲染时将组件包裹在div中。 您现在可以在component的render方法返回一个元素数组。与其他数组一样,您需要为每个元素添加一个key以避免报key警告:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

React 16.2.0开始,fragments支持JSX的特殊片段语法,不需要key。

支持返回字符串:

render() {
  return 'Look ma, no spans!';
}

Portals

Portals提供了一种将子项渲染在父组件的DOM层次结构之外的DOM节点中的好方法。

ReactDOM.createPortal(child, container)

其中,第一个参数child是任何可渲染的react元素,例如元素,字符串,或者片段。第二个参数container是dom元素

怎样使用它

当我们从组件的render方法返回一个元素时,它作为最近父节点的子节点挂载到DOM中:

render() {
  // React mounts a new div and renders the children into it
  return (
    <div>
      {this.props.children}
    </div>
  );
}

有时,将子节点插入DOM中的其他位置是很有用的:

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

portals的一个典型用例是当父组件具有overflow:hidden或z-index样式时,但是您需要子容器在视觉上“突破”其容器。例如,对话框,hover悬停卡片和tooltip。 https://codepen.io/gaearon/pe...

自定义DOM属性

React 15用于忽略任何未知的DOM属性。因为React不识别它,会跳过它们。

// Your code:
<div mycustomattribute="something" />

使用React 15会渲染一个空div:

// React 15 output:
<div />

在react16中,输出将会是下面这样子(自定义属性将会显示且不会被忽略)

// React 16 output:
<div mycustomattribute="something" />

通过设置state为NULL来避免重复渲染

使用React16,您可以直接从setState()阻止state更新和重新渲染。你只需要让你的函数返回null。

const MAX_PIZZAS = 20;

function addAnotherPizza(state, props) {
  // Stop updates and re-renders if I've had enough pizzas.
  if (state.pizza === MAX_PIZZAS) {
    return null;
  }

  // If not, keep the pizzas coming! :D
  return {
    pizza: state.pizza + 1,
  }
}

this.setState(addAnotherPizza);

访问Refs

将ref传递给render中的元素时,可以在ref的当前属性中访问对该节点的引用。

const node = this.myRef.current;

ref的值根据节点的类型而有所不同

  • 当在HTML元素上使用ref属性时,在构造函数中使用React.createRef()创建的ref将接收底层DOM元素作为current属性。
  • 当ref属性用于自定义组件时,ref对象接收组件的挂载实例作为current。
  • 您不能函数组件上使用ref属性,因为它们没有实例。

关于refs,更多

Context

Context提供了一种通过组件树传递数据的方法,而无需逐级通过props传递。

React.createContext

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

创建{Provider,Consumer}。当React渲染上下文Consumer时,它将从树中它上面最接近的匹配Provider读取当前上下文值。 defaultValue参数仅在Consumer在树中没有匹配的Provider时使用。这可以让我们不包装它们就能单独测试组件。注意:将undefined作为Provider值传递不会导致Consumer使用defaultValue。

Provider

<Provider value={/* some value */}>

一个React组件,允许消费者订阅上下文更改。接受一个value prop,传递给作为此Provider的后代的消费者。一个Provider可以连接到许多消费者,可以嵌套覆盖树中更深层的值。

Consumer

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

一个订阅上下文更改的React组件。

需要一个函数作为子元素。该函数接收当前上下文值并返回React节点。传递给函数的value参数将等于树中上述此上下文的最近Provider的value prop。如果上面没有此上下文的Provider,则value参数将等于传递给createContext()的defaultValue。

React生命周期钩子

这些是使用React16时一定要尝试的一些功能!

原文链接:segmentfault.com

上一篇:LeetCode偶尔一题 —— 908. 最小差值 I
下一篇:js 避免污染全局变量

相关推荐

官方社区

扫码加入 JavaScript 社区