关于react.js:React16新特性实践

React16新个性实际

1. lazy & Suspense

React 16.6将代码宰割(code-splitting)带到了一个新的level。您当初能够在真正须要时加载组件，且无需装置其余依赖库。

React.lazy() 提供了动静 import 组件的能力，实现代码宰割。

Suspense 作用是在期待组件时 suspend（暂停）渲染，并显示加载标识。

目前 React v16.6 中 Suspense 只反对一个场景，即应用 React.lazy() 和 <React.Suspense> 实现的动静加载组件。

举个栗子

import React, {lazy, Suspense} from 'react';
const Lazy = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Lazy />
    </Suspense>
  );
}

这是一个最简略的应用例子,当我初始化<App>组件时,在Lazy组件渲染之前,Suspense组件会填充一个loading…的div

当咱们的理论的业务场景中可能须要期待某个接口加载结束后,按需渲染

const Lazy = lazy(() => new Promise(resolve => {
  // 伪装成接口的定时器
  setTimeout(() => {
    resolve(import('./LazyComponent'));
  }, 3000);
}));

这时,咱们的Lazy组件将会在3000ms后渲染进去

在咱们的业务场景中，App能够代表多个条件渲染组件，咱们全副加载实现才勾销loding。

只有promise没执行到resolve，suspense都会返回fallback中的loading。

代码简洁，loading可晋升至先人组件，易聚合。相当优雅的解决了条件渲染。

2. Memo

React.memo() 只能作用在简略的函数组件上，实质是一个高阶函数，能够主动帮忙组件执行shouldComponentUpdate()，但只是执行浅比拟，其意义和价值无限。

const MemoizedComponent = React.memo(props => {
  /* 只在 props 更改的时候才会从新渲染 */
});

3. Hooks

Hooks 要解决的是状态逻辑复用问题，且不会产生 JSX 嵌套天堂，其个性如下：

• 多个状态不会产生嵌套，仍然是平铺写法；
• Hooks 能够援用其余 Hooks；
• 更容易将组件的 UI 与状态拆散；

Hooks 并不是通过 Proxy 或者 getters 实现，而是通过数组实现，每次 useState 都会扭转下标，如果 useState 被包裹在 condition 中，那每次执行的下标就可能对不上，导致 useState 导出的 setter 更新错数据。

function App() {
  const [open, setOpen] = useState(false);
  
  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        visible={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      />
    </>
  );
}

// [TODO]hooks的应用场景很多,待补充

4. createRef

React16 标准了 Ref 的获取形式，通过 React.createRef 获得 Ref 对象。

目前在我的开发中常常用到,例如能够在单向数据流中,能够在父组件中获取子组件的props,state等等

 constructor(props) {
    super(props)
    
    this.myRef = React.createRef()
  }

  render() {
    return <div ref={this.myRef} />
  }

5. Fragment

Fragment在以后开发中也很常见,例如在render函数中返回多个子组件时,我能够用Fragment将他们包裹起来

render() {
  return (
    <React.Fragment>
      <h2>我开着邻居家的Toyota,追着日落</h2>
      <h2>被父母说是最危险的中央 她都去过</h2>
    </React.Fragment>
  );
}

当然咱们能够用更简略的形式

render() {
  return (
    <>
      <h2>我开着邻居家的Toyota,追着日落</h2>
      <h2>被父母说是最危险的中央 她都去过</h2>
    </>
  );
}