react slot

1 use chirdren

  1. class BaseLayout extends React.Component {
  2.   static Header = Header
  3.   static Body = Body
  4.   static Footer = Footer
  6.   render() {
  7.     const {children} = this.props
  8.     const header = children.find(child => child.type === Header)
  9.     const body = children.find(child => child.type === Body)
  10.     const footer = children.find(child => child.type === Footer)
  12.     return (
  13.       <div class="container">
  14.         <header>
  15.           {header ? header.props.children : null}
  16.         </header>
  17.         <main>
  18.           {body ? body.props.children : null}
  19.         </main>
  20.         <footer>
  21.           {footer ? footer.props.children : null}
  22.         </footer>
  23.       </div>      
  24.     )
  25.   }
  26. }
  28. =
  30. // This code...
  31. <Button children={<span>Click Me</span>} />
  33. // Is equivalent to this code...
  34. <Button>
  35.   <span>Click Me</span>
  36. </Button>

2 use props

  1. function App({ user }) {
  2.     return (
  3.         <div className="app">
  4.             <Nav>
  5.                 <UserAvatar user={user} size="small" />
  6.             </Nav>
  7.             <Body
  8.                 sidebar={<UserStats user={user} />}
  9.                 content={<Content />}
  10.             />
  11.         </div>
  12.     );
  13. }
  15. // Accept children and render it/them
  16. const Nav = ({ children }) => (
  17.   <div className="nav">
  18.     {children}
  19.   </div>
  20. );
  22. // Body needs a sidebar and content, but written this way,
  23. // they can be ANYTHING
  24. const Body = ({ sidebar, content }) => (
  25.   <div className="body">
  26.     <Sidebar>{sidebar}</Sidebar>
  27.     {content}
  28.   </div>
  29. );
  31. const Sidebar = ({ children }) => (
  32.   <div className="sidebar">
  33.     {children}
  34.   </div>
  35. );
  37. const Content = () => (
  38.   <div className="content">main content here</div>
  39. );

react 之 PropTypes验证

  1. import PropTypes from 'prop-types'
  3. Footer.propTypes = {
  4.   completedCount: PropTypes.number.isRequired,
  5.   activeCount: PropTypes.number.isRequired,
  6.   onClearCompleted: PropTypes.func.isRequired,
  7. }

image.png

进阶

使用 PropTypes 进行类型检查

import PropTypes from ‘prop-types’;

Context

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

代码分割

1 动态import
当使用 Babel 时，你要确保 Babel 能够解析动态 import 语法而不是将其进行转换。对于这一要求你需要 babel-plugin-syntax-dynamic-import 插件。

动态 import() 语法目前只是一个 ECMAScript (JavaScript) 提案， 而不是正式的语法标准。预计在不远的将来就会被正式接受。

  1. import("./math").then(math => {
  2.   console.log(math.add(16, 26));
  3. });

2 基于路由的代码分割

和服务端进行交互

前端请求流程

在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

  1. UI 组件交互操作；
  2. 调用 model 的 effect；
  3. 调用统一管理的 service 请求函数；
  4. 使用封装的 request.ts 发送请求；
  5. 获取服务端返回；
  6. 然后调用 reducer 改变 state；
  7. 更新 model。
  1. // models/user.ts
  2. import { queryCurrent } from '../services/user';
  3. ...
  4. effects: {
  5.   *fetch({ payload }, { call, put }) {
  6.     ...
  7.     const response = yield call(queryCurrent);
  8.     ...
  9.   },
  10. }
  12. // services/user.ts
  13. import request from '../utils/request';
  15. export async function query() {
  16.   return request('/api/users');
  17. }
  19. export async function queryCurrent() {
  20.   return request('/api/currentUser');
  21. }

request.ts

https://github.com/ant-design/ant-design-pro/blob/master/src/utils/request.ts

开发趋势

css_modules
hooks
ts支持
开发启动快，支持一键开启 dll 等
以路由为单元的 code splitting 等

考虑将技术栈转移到
Umi
ant-design-pro
ant-design-mobile
TS