更多技术文章，可以浏览我的github地址，https://github.com/HuYuee/blog
10月23日，React发布了16.6版本，在此版本中带来了一些非常有用的新特性。主要的新特性包括:
-
React.memo()
-
React.lazy()
-
static contextType()
-
static getDerivedStateFromError()
React.memo()
React.memo() 是能作用在简单的函数组件，类似于React.PureComponent对于class组件的作用。它本质上是一个高阶函数，达到的效果就是，自动帮组件执行shouldComponentUpdate() , 但是只是执行浅比较
Using memo()
使用方式就像高阶函数一样，包装了一层，如下：
const MemoizedComponent = React.memo(function MyComponent(props) {
//_ only rerenders if props change_
});
// for arrow functions
const OtherMemoized = React.memo(props => {
return <div> Memoized Component </div>
}
也能包装已经存在的函数，如下：
const MyComponent = props => <div> This is memorable!! </div>
const Memoized = React.memo(MyComponent)
官网在最后明确提到了一句：
This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs。---- React官网
意思就是说：这个高阶函数存在是作为一种性能优化的方式。不要使用它去纯粹地阻止渲染，否则可能会导致出现bug
React.lazy() and Suspense
通过这个API，我们就可以达到代码分割的效果。代码分割是允许我们去延迟加载我们的import，意味着我们在渲染当前页面的时候去提升当前页面的性能，提高渲染速度。
React.lazy() 和 Suspense 现在暂时还不支持服务器端渲染。如果你想要在服务器端做代码分割，我们仍然推荐使用React Loadable。---- React官网
React.lazy()
React.lazy()允许我们去动态的加载组件。
普通方式引入：
import OtherComponent from './OtherComponent';
import AnotherComponent from './AnotherComponent';
function MyComponent(bool) {
return (
<div>
{bool?<OtherComponent />:<AnotherComponent />}
</div>
);
}
动态的加载组件方式：
function MyComponent(bool) {
let Component;
if(bool){
Component = React.lazy(() => import('./OtherComponent'));
}else{
Component = React.lazy(() => import('./AnotherComponent'));
}
return (
<div>
<Component />
</div>
);
}
Suspense
如果OtherComponent没有被加载成功，我可以通过使用Suspense这个组件的参数fallback参数来显示一些类似于加载中的提示内容。如下：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
最主要的是，Suspense组件中可以包裹多个动态加载的组件，这样统一管理，非常的方便。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}
关于动态加载组件的更加详细的用法，包括路由里面使用场景，可以参考地址
static contextType
在class中增加了该contextType属性，这个属性可以让你在任何一个生命周期函数中都能通过this.context来使用到通过React.createContext()创建的Context对象。在下面我会用两个例子来对比这个属性的好处。
使用contextType：
import {ThemeContext} from './theme-context';
class ThemedButton extends React.Component {
render() {
let props = this.props;
let theme = this.context;
return (
<button
{...props}
style={{backgroundColor: theme.background}}
/>
);
}
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;
未使用contextType：
import {ThemeContext} from './theme-context';
function ThemedButton(props) {
return (
<ThemeContext.Consumer>
{theme => (
<button
{...props}
style={{backgroundColor: theme.background}}
/>
)}
</ThemeContext.Consumer>
);
}
export default ThemedButton;
是不是发现方便了很多，不需要再包一层Consumer组件。但是这个现在支持class组件，函数组件还不支持。
static getDerivedStateFromError()
这个生命周期函数会在子组件抛出一个错误之后被调用。它会接收到这个throw出来的参数，然后去return一个值去更新state来处理这个错误。设置错误边界可以让代码在出错的情况下，也能将错误显示到页面中，而不是出现空白页面。demo
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
一般使用static getDerivedStateFromError() 来渲染一个提示错误的UI，使用componentDidCatch() 来记录一些error的详细信息，错误调用栈等等
更多技术文章，可以浏览我的github地址，https://github.com/HuYuee/blog
网友评论