微信授权扫码点餐-新特性React16

download：《网易云课堂》微信授权扫码点餐-新特性React16请添加链接描述
render 支持返回数组和字符串
render() {
return [
<li/>1</li>,
<li/>2</li>,
<li/>3</li>,
];
}
1
2
3
4
5
6
7
错误边界
更优雅的错误处理：如果一个错误在 组件渲染 或者 生命周期 或者 构造函数 中被抛出，整个组件将会被卸载，而不影响其他组件的渲染。

自己写成高阶组件，方便使用：

export default function ErrorBoundary(WrappedComponent) {
return class extends React.Component {
state = { hasError: false, errorInfo: "" };

componentDidCatch(error, info) {
  this.setState({ hasError: true, errorInfo: info.componentStack });
}
render() {
  if (this.state.hasError) {
    return (
      <div style={{ border: "1px solid", padding: "10px" }}>
        <h4>当前的组件数据返回错误，但是不影响接下来的渲染！</h4>
        <p>错误信息是： {this.state.errorInfo}</p>
      </div>
    );
  }
  return <WrappedComponent />;
}

};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Fiber
————————————————
版权声明：本文为CSDN博主「时光之里」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m_review/article/details/90299144

标签：扫码,return,render,微信,hasError,state,组件,点餐,errorInfo
来源： https://blog.51cto.com/15115119/2653394