前端快报7月

ES2022 Features!

这篇文章介绍ES2022的Features。

Stop The Screen Going To Sleep With JavaScript

这篇文章介绍WakeLock api的使用方法。WakeLock用于防止用户屏幕变暗或者锁屏。NoSleep.js就是封装了WakeLock的能力来实现对应的功能.

NoSleep功能实现:

• 在支持wakeLock的设备上使用wakeLock
• 在老的ios设备上 通过设置当前href和window.stop的定时器来激活页面
• 其他情况通过设置一个循环播放的video标签来实现

工具

react-flow

react绘制图表和流程图的工具库

想法

关于前端页面设计

• 作为前端开发似乎很容易直接从页面的角度去考虑实现，因为接触的UI就是最直观的图形输入。但是页面不光是简单的UI展示，后面还承载着数据的流动。从数据流去思考业务的逻辑和设计实现页面和业务逻辑的分离。数据承接逻辑，页面承接UI渲染组合能更好的服务于页面的扩展。

react hooks的理解

hooks是react暴露给外部的接口。这个是react增加hooks提供的一个比较重要的能力。比如react query通过hooks的能力桥接了queryClient.

源码解读

react-archer源码分析

react-archer通过箭头线绘制React节点之间的关联关系。它的实现主要:

• 维护全局的节点关联关系(逻辑抽象 封装)
• 解耦节点渲染和箭头线渲染(解耦)

节点关系处理逻辑

    // 子节点注册逻辑
    const registerTransitions = (newRelations: Array<RelationType>) => {
        // 格式化节点配置
        const newSourceToTarget = generateSourceToTarget(id, newRelations);
        assertContextExists(context);
        // 更新全局节点配置
        context.registerTransitions(id, newSourceToTarget);
    }

    // 根节点更新逻辑
    const _registerTransitions = useCallback(
        (elementId: string, newSourceToTargets: SourceToTargetType[]): void => {
            // 节点关系在根节点中通过useState进行更新维护 触发组件更新
            setSourceToTargetsMap((previousValue) => ({
                ...previousValue,
                [elementId]: newSourceToTargets,
            }));
        },
        [],
    );

箭头渲染逻辑

在根组件中通过SvgArrows渲染节点连接逻辑

// 遍历节点关系数据 依次渲染
{getSourceToTargets(props.sourceToTargetsMap).map((currentRelation) => (
    <AdaptedArrow
      key={JSON.stringify({
        source: currentRelation.source,
        target: currentRelation.target,
      })}
      source={currentRelation.source}
      target={currentRelation.target}
      label={currentRelation.label}
      style={currentRelation.style || {}}
      startMarker={props.startMarker}
      endMarker={props.endMarker}
      endShape={props.endShape}
      strokeColor={props.strokeColor}
      strokeWidth={props.strokeWidth}
      strokeDasharray={props.strokeDasharray}
      noCurves={props.noCurves}
      lineStyle={props.lineStyle}
      offset={props.offset}
      parentCoordinates={parentCoordinates}
      refs={props.refs}
      uniqueId={props.uniqueId}
    />
))}

// 使用getBoundingClientRect和配置项计算绘制箭头的位置 最后使用svg进行关联线的绘制
export const getPointCoordinatesFromAnchorPosition = (
    position: AnchorPositionType,
    index: string,
    parentCoordinates: Vector2,
    refs: Record<string, HTMLElement>,
): Vector2 => {
    const rect = getRectFromElement(refs[index]);

    if (!rect) {
        return new Vector2(0, 0);
    }

    const absolutePosition = computeCoordinatesFromAnchorPosition(position, rect);
    return absolutePosition.substract(parentCoordinates);
};