react 日历组件_anujs1.5.1支持React.Suspense与lazy
React16是一個(gè)實(shí)驗(yàn)版本，除了測(cè)試它的新fiber架構(gòu)外，還添加了大量新功能。其他React.Suspense與React.lazy就是重磅中的重磅。
隨著前端的APP化，不斷集成功能，頁(yè)面越來(lái)越大，bundle size以MB為單位，我們需要拆分代碼，實(shí)現(xiàn)動(dòng)態(tài)化加載非首屏功能。比日歷，城市選擇器，評(píng)論組件等等。
動(dòng)態(tài)加載，在javascript模塊加載規(guī)范中已經(jīng)有草案，并且被webpack, rollup所支持
import('../components/Hello').then(Hello => {console.log(<Hello />); });相當(dāng)于（setTimeout模擬異步加載組件）：
new Promise(resolve =>setTimeout(() =>resolve({// 來(lái)自另一個(gè)文件的函數(shù)式組件default: function render() {return <div>Hello</div>}}),3000) ).then(({ default: Hello }) => {console.log(<Hello />); });React16提供了lazy組件實(shí)現(xiàn)這個(gè)功能
var {lazy, Suspense} = React;var OtherComponent = lazy(()=>{return new Promise(resolve =>setTimeout(() =>resolve({default: function Hello() { //export defaultreturn <div>Hello</div>}}),3000))});上面只是一個(gè)方便大量測(cè)試的例子，實(shí)際需要將 <div>Hello</div> 放到一個(gè)文件中，使用import()語(yǔ)法引進(jìn)來(lái)，即
const OtherComponent = React.lazy(() => import('./OtherComponent'));OtherComponent.js的源碼
export default function Hello(){return <div>Hello</div> }接著我們實(shí)現(xiàn)將動(dòng)態(tài)功能加進(jìn)組件樹，就是所謂的條件渲染。這個(gè)功能由React.Suspense提供。在框架不提供這功能的情況下，我們需要找一個(gè)父組件，將這組件動(dòng)態(tài)掛上去：
class MyComponent extends Component {constructor() {super();this.state = {};// 動(dòng)態(tài)加載import('./OtherComponent').then(({ default: OtherComponent }) => {this.setState({ OtherComponent });});}render() {const { OtherComponent } = this.state;return (<div>{/* 條件渲染 */}{ OtherComponent && <OtherComponent /> }</div>);} }但光是這樣還是不行的，因?yàn)閱渭兊膭?dòng)態(tài)加載，會(huì)引起頁(yè)面抖動(dòng)，我們需要loading將這個(gè)突兀的顯示給緩解一下。于是這render需要改成
render() {const { OtherComponent } = this.state;return (<div>{OtherComponent ? <OtherComponent />: <Loading />}</div>);}如果有了Suspense組件，我們就簡(jiǎn)單了，不需要入侵已有的組件，并且有地方掛這個(gè)loading。
<Suspense fallback={<Loading />}><OtherComponent /></Suspense>需要注意的是，lazy組件外面必須包著一個(gè)Suspense組件。從框架層面對(duì)用戶體驗(yàn)提出了強(qiáng)制要求。
下面是一個(gè)完整的例子
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <!--<script src="https://cdn.bootcss.com/react/16.7.0-alpha.2/umd/react.development.js"></script><script src="https://cdn.bootcss.com/react-dom/16.7.0-alpha.2/umd/react-dom.development.js"></script> --><script src="./dist/React.js"></script> <script type='text/javascript' src="./lib/babel.js"></script></head><body><div id='root' class="root"></div><script type='text/babel'>var { lazy, Suspense } = React; var OtherComponent = lazy(() => {return new Promise(resolve =>setTimeout(() =>resolve({default: function render(props) {//export defaultreturn <div>Hello,{props.name}</div>;}}),3000)); }); var valueRef = React.createRef() class App extends React.Component {constructor(props){super(props)this.state = {name: "ruby"}}updateName(){var name = valueRef.current.value;this.setState({name})}render() {return (<div><p><input ref={valueRef} onChange={this.updateName.bind(this)} value={this.state.name} />{new Date-0}</p><Suspense fallback={<div>loading...</div>}><OtherComponent name={this.state.name} /></Suspense></div>);} }ReactDOM.render(<App />, document.getElementById("root"));</script></html>最后說(shuō)一下實(shí)現(xiàn)，React官方是通過(guò)lazy組件主動(dòng)拋錯(cuò)，給上面Suspense組件接住的hack方式實(shí)現(xiàn)的
https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberWorkLoop.js#L907-L1057
lazy組件被讀取時(shí)
https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberLazyComponent.js
React官方投入了近500行代碼實(shí)現(xiàn)的，
再看一下anujs如何實(shí)現(xiàn)的。
anujs的Suspense是異常簡(jiǎn)單，就是一個(gè)虛擬組件，甩手掌柜，總是渲染它的孩子。它只負(fù)責(zé)掛loading。
function Suspense(props){return props.children }export {Suspense }lazy組件就是將用戶函數(shù)，再包一層，封到一個(gè)LazyComponent組件中，它會(huì)根據(jù)用戶的promise決定是返回上層的suspense組件的fallback屬性，還是延期加載回來(lái)的組件。
import { miniCreateClass, isFn, get } from "react-core/util"; import { Component } from "react-core/Component"; import { createElement } from "react-core/createElement"; import { Suspense } from "./Suspense";var LazyComponent = miniCreateClass(function LazyComponent(props, context) {this.props = props;this.context = context;this.state = {component: null,resolved: false}var promise = props.render();if(!promise || !isFn(promise.then)){throw "lazy必須返回一個(gè)thenable對(duì)象"}promise.then( (value) =>this.setState({component: value.default,resolved: true}))}, Component, {fallback(){//返回上層Suspense組件的fallback屬性var parent = Object(get(this)).returnwhile(parent){if( parent.type === Suspense){return parent.props.fallback}parent = parent.return}throw "lazy組件必須包一個(gè)Suspense組件"},render(){return this.state.resolved ? createElement(this.state.component) : this.fallback()} }); function lazy(fn) {return function(){return createElement(LazyComponent, {render: fn})} } export {lazy }最后歡迎大家使用anujs 。一個(gè)迷你React框架，支持react16 的所有新特性，可以用于小程序中。
RubyLouvre/anu?github.comnpm i anujs總結(jié)
以上是生活随笔為你收集整理的react 日历组件_anujs1.5.1支持React.Suspense与lazy的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 微信二维码支付能找到人吗？
- 下一篇： 程序代码移植和烧录需要注意什么_购买建站