深入React，做一个高阶练习生

从很久以前说起

很久以前，一个前端练习生，开源了一个不知名的组件库antd-doddle，还特意写了接入文档，文档地址, 真的是用做开源的态度，在认认真真做项目。这个组件库在公司内部差不多用了一年多，感觉还是把日常哪些简单琐碎的事简化了，有更多的时间去成长。这不，最近有点成长，又有点闲心，就用更React的思想重构了这个组件库中最重要的一个组件FormRender，为了保持兼容性，重构后的组件叫FormGroup。

关联库地址: https://github.com/closertb/a...

关联文档地址: http://doc.closertb.site/guid...

先看看对比

下面是要实现的效果图

下图是老组件与重构后组件实现上面一个表单的代码对比图：红色部分为差异（伪代码）

重构后的组件在多写了一个表单项的基础上，两个组件的代码量看起来是差不多的。老组件必须在Class组件上用，新的可以直接在函数组件跟着Hooks一起用。从示例也可以看出两个在FormRender表单项逻辑编写这一块是一致的，差异表现在getFieldDecorator的绑定时机。
从React的思路来看，重构后的组件更像是React组件。

实现思路

重构组件的实现，其实就和两个React Api相关：

• React.Children
• React.cloneElement

先做一个初显得了解；

关于React.cloneElement

老规矩，首先看官方文档
API: 与createElement传参一致

React.cloneElement(
  type,
  [props],
  [...children]
)

以 element 元素为样板克隆并返回新的 React 元素。返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。新的子元素将取代现有的子元素，而来自原始元素的 key 和 ref 将被保留。React.cloneElement() 几乎等同于：

<element.type {...element.props} {...props}>{children}</element.type>

但特别是：

使用cloneElement克隆的组件，会保留组件的 ref。这意味着当通过 ref 获取子节点时，你将不会意外地从你祖先节点上窃取它。相同的 ref 将添加到克隆后的新元素中。

虽然cloneElement在我们日常开发中不常用，但在组件库中，他是一个常客，说一个可能都见过但实现不为人熟知的API：getFieldDecorator，他的使用方式如下：

<FormItem label="原生组件" {...formItemLayout} >
  {getFieldDecorator的实现，其实是依赖('self', {
    initialValue: 'self name',
  })(
    <Input
      type="text"
    />
  )}
</FormItem>

你可能和我当时第一感觉相像，这个API是个高阶组件（函数）：意指输入一个组件，返回一个修饰后的组件。但再仔细想想：不要在 render 方法中使用 HOC（来自官方文档），具体为啥：就是高阶组件返回的组件和输入组件指向的不是同一个地址，这在react中最忌讳的，意味每次render都得重新卸载，再挂载一次，耗费性能不说，状态还不能保持。所以getFieldDecorator的实现，其实是依赖cloneElement实现的。

关于React.Children

老规矩，首先看官方文档，每一个父节点，都有自己的子节点。在react中，父节点可以通过props.children得到自己的子元素。可能有人会为props.children可以为哪些类型？
接下来，举例说明：

 <div>
  <h3><div>这是个标题</div></h3>
  <FormGroup {...formProps}>
    <Row>
      {editFields.map(field=> <FormRender key={field.key} {...{ field, data }} />)}
      <Col span={12}>
        <FormItem label="原生组件" {...formItemLayout} >
          {getFieldDecorator('self', {
            initialValue: 'self name',
          })(
            <Input
              type="text"
            />
          )}
        </FormItem>
      </Col>
    </Row>
  </FormGroup>
  <div style={{ textAlign: 'center' }}>
    <Button onClick={handleSubmit}>提交</Button>
    <span style={{ marginLeft: 20 }}>文字</span>
    <span style={{ marginLeft: 20 }}>{3}</span>
    {false && <span style={{ marginLeft: 20 }}>3</span>}
    {null && <span style={{ marginLeft: 20 }}>3</span>}
    <span style={{ marginLeft: 20 }}>{undefined}</span>
  </div>
</div>

经过实践，得到一个结论：任何类型

• Array: 数组，这是最多见的，比如这里最外围的div容器；

• Object: 对象是仅此于数组出现频次的，比如这里的h3中的div节点

• String: 字符串类型的节点也是非常常见的
• Boolean：做条件判断，这个也是常用的
• Number: 这个也是有的
• Undefined：这个也是常有的是
• null：这个是比删除中间节点更好的方式

上面四种基本类型，在上一张图中都有体现

React.Children提供了四个方法

• map
• forEach
• count
• only

这里我们只用到了map，其他三种有兴趣可以看官方文档。而React.Children.map与Array.map方法相似，语法：

React.Children.map(children, function[(thisArg)]);

children的类型没有要求一定是Array, 可以是上面讨论过的任意类型，官方的翻译是这样描述的：

If children is an array it will be traversed and the function will be called for each child in the array. If children is null or undefined, this method will return null or undefined rather than an array

说人话就是：除了null or undefined不会遍历（就是function函数不会被调用），直接返回；其他类型都会被转化成一个数组，并被遍历；

FormGroup的实现

FormGroup的出现，就是要提前收集Form的一些公共参数，比如getFieldDecorator,Layout，required这些，并把这些特性传递给FormRender,这样使用时，就不用每个FormRender都去传一遍这些相同的属性。基于前面的铺垫，现在想想FormGroup的实现，是不是特别简单，分三步：

• 拦截children，
• 识别childer中的FormRender组件,并将公共属性传递给他
• 返回修饰后的children

看代码实现：

// 深度优先遍历 react children, 识别FormRender
function deepMap(children, extendProps) {
  return Children
    .map(children, (child) => {
      // 防止null,undefined,boolean
      if (!child) {
        return child;
      }
      const isDefine = typeof child.type === 'function';
      // 仅对FormRender组件做属性扩展, extendSymbol就是唯一身份识别
      if (isDefine && child.type.$type === extendSymbol) {
        return cloneElement(child, { extendProps });
      }
      if (child && child.props && child.props.children && typeof child.props.children === 'object') {
        return cloneElement(child, {
          children: deepMap(child.props.children, extendProps),
        });
      }
      return child;
    });
}

export default function FormGroup(constProps: GroupProps) {
  const { formItemLayout = layout, containerName, getFieldDecorator, required,
    Wrapper = WrapperDefault, withWrap = false, children, dynamicParams, ...others } = constProps;
  
  const extendProps = {
    formItemLayout,
    containerName,
    dynamicParams,
    getFieldDecorator,
    require: required,
    Wrapper,
    withWrap
  };

  return (
    <Form {...others}>
      {deepMap(children, extendProps)}
    </Form>);
}

FormGroup.FormRender = FormRender;

总结

至此，这个优化涉及到的知识就说完了.但是有些自己踩的坑还是要记录一下。

使用function.name做唯一识别

为了有针对性的做属性扩展，我开始写了这样一段代码：

if (isDefine && child.type.name === 'FormRender') {
  return cloneElement(child, { extendProps });
}

在本地跑demo测试时，代码正常，但打正式环境包运行时，FormRender报'can't read getFieldDecorator of undefined',最后排查，发现是代码压缩造成function.name被重命名；所以后面调整了方案，在全局做了一个extendSymbol唯一标识；

export const extendSymbol = Symbol('extend');

// 在FormRender.ts中
FormRender.$type = extendSymbol;

没有搞清楚props.chilren类型

为什么我在讲React.Children时，要特意提到props.chilren有哪些类型，因为我在做深度遍历时吃过亏，虽然React.Children(children)可以遍历任意类型，但child的类型也是任意的，所以有下面这些写法,对可选链语法甚是期待:

  // 防止null,undefined,boolean
  if (!child) {
    return child;
  }

  if (child && child.props && child.props.children && typeof child.props.children === 'object')

原文地址: https://github.com/closertb/c...

附赠一个简单的组件实现用例：Tab实现

import React, { useState, Children, cloneElement, useCallback } from 'react';

Tab.TabPane = ({ children, show = false }) => {
  console.log('show', show);
  return show ? children : null;
}

export default function Tab({ defaultValue, children }) {
  const [status, setStatus] = useState(defaultValue);
  const maps = new Map();
  const cloneChildren = Children.map(children, (child) => {
    const { value, name } = child.props;
    const show = value === status;
    maps.set(value, { value, name, show });
    return cloneElement(child, { show });
  });

  const handleCheck = useCallback((pre) => () => {
    setStatus(pre);
  }, []);

  console.log('map', Array.from(maps));
  return (
    <div className="tab-container">
      <ul className="tab-header">
          {Array.from(maps).map(([value, { name } ]) => (
            <li key={value} className={ value === status ? 'checked' : '' }>
              <a onClick={handleCheck(value)}>{name}</a>
            </li>
          ))}
      </ul>
      <div className="tab-content">
        {cloneChildren}
      </div>
    </div>
  );
}

使用：

// 伪代码
import React, { useState, useCallback } from 'react';
import style from './index.less';
import Tab from './Tab';

const { TabPane } = Tab;

function Component />({ con }) {
    return <div>{con}</div>;
}
const CMap = [
  ['水平垂直居中', <Component con="水平垂直居中" />],
  ['定位布局', <Component con="定位布局" />],
  ['层叠上下文', <Component con="层叠上下文" />],
];


export default function StyleTest() {
  return (
    <div className={style.wrapper}>
      <Tab defaultValue={0}>
        {CMap.map(([name, Component], index) => (
          <TabPane value={index} name={name} key={index}>
            <Component />
          </TabPane>
        ))}
      </Tab>
    </div>
  );
}