Wang Wei's Blog

本文使用的是 formily 2.* 版本

理论

官方文档

formily 主站：https://formilyjs.org/zh-CN

formily 核心库 core：https://core.formilyjs.org/zh-CN

题目链接：https://github.com/type-challenges/type-challenges/blob/master/README.zh-CN.md

如何练习提高自己的类型体操水平

正确区分类型（type）和值（value）

熟悉常见的类型体操动作

• 原始类型(Primitive Type)
• 字面量类型(Literal Type，Template Literal Type)
• 联合类型(Union Type)和交叉类型(Intersection Type)
• 索引类型(Index Type)和映射类型(Map Type)
• 条件类型(Conditional Type)
• typeof 和 keyof

UseEffect

useEffect 是进行批量顺序执行的。

如果两个连着的 useEffect 则是会顺序执行。

test demo：

const { useEffect, useState } = React;
const TestComponent = ({
  parentConfig
}) => {
  const [ isShow, setIsShow ] = useState(false);
  const [ config, setConfig ] = useState({});
  useEffect(() => {
    setConfig(parentConfig)
    setIsShow(false)
    console.log('first: ', isShow, parentConfig)
  }, [parentConfig])
  useEffect(() => {
    setIsShow(Object.keys(config).length > 0)
    console.log('second: ', isShow)
  }, [config])
  useEffect(() => {
    console.log('update isShow: ', isShow, '=========')
  }, [isShow])
  console.log('render TestComponent');
  return (
    isShow && <div>test</div>
  )
}

function App() {
  const [ parentConfig, setParentConfig ] = useState({a: 1});
  console.log('render App')
  return (
    <div className="App">
      <button onClick={() => setParentConfig(Object.keys(parentConfig).length > 0 ? {} : {a: 1})}>
        switch parentConfig
      </button>
      <TestComponent parentConfig={parentConfig} />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

前端异常监控系统

之前写微信小程序的时候使用的微信小程序自带的实时日志 API ，微信小程序端将错误信息进行上报，可以在微信小程序公众平台上进行查看。

当前公司使用的是 Sentry.io 管理前端异常。需要手动上传当前登录用户的信息和错误信息。然后在 Sentry 错误信息管理平台进行查看报错信息和系统性能。

Sentry’s SDK hooks into your runtime environment and automatically reports errors, uncaught exceptions, and unhandled rejections as well as other types of errors depending on the platform.

Sentry 后端系统可以使用 python 进行搭建。

组件渲染

什么时候会触发组件渲染

当传入组件的 props 和组件内部 state 更新时会触发组件渲染。

当父组件发生渲染就会触发子组件的渲染，如果是 class 组件则可以使用 React.PureComponent 进行优化，如果是函数组件则可以使用 React.memo 进行优化，减少渲染次数。

值得阅读的文章

工厂

工厂通常是一个用来创建其他对象的对象。工厂是构造方法的抽象，用来实现不同的分配方案。

工厂对象通常包含一个或多个方法，用来创建这个工厂所能创建的各种类型的对象。这些方法可能接收参数，用来指定对象创建的方式，最后返回创建的对象。

工厂方法模式、抽象工厂模式、生成器模式，甚至是单例模式都应用了工厂的概念

工厂模式

单例模式

单例模式，也叫单子模式，是一种常用的软件设计模式，属于创建型模式的一种。在应用这个模式时，单例对象的类必须保证只有一个实例存在。许多时候整个系统只需要拥有一个的全局对象，这样有利于我们协调系统整体的行为。—— 维基百科

保证一个类仅有一个实例,并提供一个访问它的全局访问点。

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象等。

实现

主要是调试 H5 页面。审查各个系统环境下的样式和断点调试。

在Mac OS 上调试

iOS 生态环境调试会很容易。

模拟环境

环境准备

相关定义

自适应布局：一套代码，多设备自适应显示。

响应式布局：多套代码，不同设备尺寸范围布局方案不同。

布局样式

弹性盒