关于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>
    </>
  );
}