最官方的react16.0更新功能

xingpingz 发布于2019-08-22 13:53 / 842人阅读

摘要：修复了这一点，引入了的概念，中文译为错误边界，当某个组件发生错误时，我们可以通过捕获到错误并对错误做优雅处理。扩展采用了最新的技术，你可以在点击这里来阅读官方文档暂时就这么多，后续发现更多我再进行更新，希望大家喜欢

React v16.0

September 26, 2017 by Andrew Clark

新版本的render可以返回数组、字符串、react组件、数字、boolean值

如果返回数组必须给每一个数组元素添加一个唯一标识key，但是从v16.2开始reat

// 第一种返回数组
render() {
  // 这里不同于v15.x必须要一个标签来包裹
  return [
    // key是必须的，一般不要把数组的index索引作为key，这样可能会导致页面不会按照你想象的效果进行渲染
    First item,
    Second item,
    Third item,
  ];
}

// 第二种返回字符串
render() {
  return "Look ma, no spans!";
}

更好的错误处理方式

之前react在渲染过程中或者是生命周期内出现了致命的错误，react会从根组件上把所有的组件都卸载下来，以防止展现错误的数据，但这不是最好的用户体验。React 16修复了这一点，引入了Error Boundary的概念，中文译为“错误边界”，当某个组件发生错误时，我们可以通过Error Boundary捕获到错误并对错误做优雅处理。（注：它并不能捕获runtime所有的错误，比如组件回调事件里的错误，可以把它想象成传统的try-catch语句）

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
// 新增了componentDidCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树。
  componentDidCatch(error, info) {
    // 错误代理组件的展示与否
    this.setState({ hasError: true });
    // 在这里我们可以对错误进行记录
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // 在这里我们可以书写自己想要展示的ui组件
      return Something went wrong.;
    }
    return this.props.children;
  }
}

上面的组件是当页面中有错误时我们想要展示的效果，具体用法如下:

render(){
  return (
    
          // 外层组件我们定义的错误组件
             // 内层组件是我们将要监视的自定义组件
      
      
    
  )
}

这个组件能够不仅仅能够监听到本组件的错误，连同它下面的子组件的错误也可以监听到

setState传入null时不会再触发更新

之前的setState不管传入什么只要调用了这么方法就会渲染

selectCity(e){
  const newValue = e.target.value;
  this.setState((state)=>{
    if(state.city===newValue){
      return null;
    }
    return {city:newValue}
  })
)

v16.0支持自定义的dom属性

之前的版本对于自定义属性react会在属性前加上data-**来进行处理，现在对于部分属性去除了这种写法，拥抱了原生dom，这样可以减少react的代码，提升了性能

从数据来说，React v16比v15.6版本缩小了32%

更好的服务器端渲染：React 16的SSR被完全重写，新的实现非常快，接近3倍性能于React 15，现在提供一种流模式streaming，可以更快地把渲染的字节发送到客户端。

扩展

react v16采用了最新的技术“Fiber.”，你可以在点击这里来阅读官方文档

暂时就这么多，后续发现更多我再进行更新，希望大家喜欢

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92577.html

React 16 发布啦。。渣渣看了一下更新文档~

摘要：又双叒更新啦这次是，其实在前段时间就知道最近要发布了。协议更新了。。。这样做是为了阻止损坏数据的显示。协议的协议已经是协议了，当然，也把已经发布的页改成协议了。 React 又双叒更新啦~ 这次是React v16.0，其实在前段时间就知道最近要发布了。协议更新了。。。来看看其他的变化吧。自己看着玩的。。期待官方中文文档的更新。。原文地址：React v16.0 我们很高兴地宣布发...

xi4oh4o 2019-08-21 16:47 评论0 收藏0
重拾React: React 16.0

摘要：然而之前的相当于从最顶层的组件开始，自顶向下递归调用，不会被中断，这样就会持续占用浏览器主线程。众所周知，是单线程运行，长时间占用主线程会阻塞其他类似于样式计算布局绘制等运算，从而出现掉帧的情况。前言　　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励，希望大家多多关注呀！从今年年初离开React开发岗，...

henry14 2019-08-23 13:57 评论0 收藏0
盘点 React 16.0 ~ 16.5 主要更新及其应用

摘要：大约一年前，团队发布了。时至今日，已更新到。这其中有不少激动人心的特性如架构的引入新的周期函数全新等都值得开发者跟进学习。本文就以更新日志为引，选取几个重要且用于工作的更新，和大家一起学习。所有示例代码在配合文章一起食用更佳大约一年前，React 团队发布了 React 16.0。时至今日，已更新到 16.5 。这其中有不少激动人心的特性(如 Fiber 架构的引入、新的周期函数、全...

idealcn 2019-08-23 12:03 评论0 收藏0
React16时代，该用什么姿势写 React ?

摘要：的返回值将作为的参数，如果返回，则不更新，不能返回或以外的值，否则会警告。在更新之前调用，此时已更新返回值作为的第个参数一般用于获取之前的数据语法是从的返回值，默认是的使用场景一般是获取组建更新之前的滚动条位置。 React16 后的各功能点是多个版本陆陆续续迭代增加的，本篇文章的讲解是建立在 16.6.0 版本上本篇文章主旨在介绍 React16 之后版本中新增或修改的地方，所以对于...

Reducto 2019-08-23 15:33 评论0 收藏0