房子装修网站,珠海品牌网站建,网站建设开发详细步骤流程图,wordpress 模版 推荐memo 1 #xff09; 概述
memo 在react 16.6 推出的一个API它的用意是让 function component#xff0c;有一个类似 PureComponent 的一个功能 PureComponent 提供了 class component 组件类型在props没有变化的情况下#xff0c;它可以不重新渲染 目的是给 function compo…memo 1 概述
memo 在react 16.6 推出的一个API它的用意是让 function component有一个类似 PureComponent 的一个功能 PureComponent 提供了 class component 组件类型在props没有变化的情况下它可以不重新渲染 目的是给 function component 做一个 PureComponent 的对标这个用法很简单就不进行举例了
2 ) 源码解析
// memo.js/*** Copyright (c) Facebook, Inc. and its affiliates.** This source code is licensed under the MIT license found in the* LICENSE file in the root directory of this source tree.*/import {REACT_MEMO_TYPE} from shared/ReactSymbols;import isValidElementType from shared/isValidElementType;
import warningWithoutStack from shared/warningWithoutStack;export default function memoProps(type: React$ElementType,compare?: (oldProps: Props, newProps: Props) boolean,
) {if (__DEV__) {if (!isValidElementType(type)) {warningWithoutStack(false,memo: The first argument must be a component. Instead received: %s,type null ? null : typeof type,);}}return {$$typeof: REACT_MEMO_TYPE,type,compare: compare undefined ? null : compare,};
}可以看到 memo 是一个方法第一个参数 type 可以是 function component第二个参数 compare 是一个 old props 和 new props 的对比方法返回值是 boolean类似于 SCU 最终的返回值是一个对象 $$typeof 是 REACT_MEMO_TYPEtype就是我们传入的 function componentcompare 是我们传入的第3个参数所以它就跟之前的 forwardRef, context 差不多一类的东西最终它实现的逻辑肯定还是要到 react-dom 那边来实现的
Fragment 1 ) 概述
Fragment 实际上是一个 Symbol在我们项目代码中的 和 / 实际上等价于 React.Fragment 和 React.Fragment /这是React 渲染函数 render 中返回的单个节点的约束和无用div节点的平衡处理
2 源码
// React.jsFragment: REACT_FRAGMENT_TYPE,从概述中得知本身这个节点没有任何的意义它也不会生成多余的节点只是告诉 react 里面是有多个兄弟节点本身就是一个 Symbol没有特殊的含义它的作用就是用于包裹节点
StrictMode 1 ) 概述
StrictMode 本质是一个组件它的作用是在渲染内部组件时,发现不合适的代码并给出提醒
2 源码 // React.jsStrictMode: REACT_STRICT_MODE_TYPE,实际上它也是一个 Symbol它就跟 ConcurrentMode 是差不多的意思它这个节点下面的所有子树都要按照某一种模式进行渲染对于其规则下面的所有子树的节点会给我们提供一些过时的API的提醒 比如说在某个节点下面使用了 componentWilMount 这种将要过期的生命周期方法的时候它就会做出提醒说你这个方法是不好的你不应该这么去做它使用方式也是像 react component所以影响的范围仅仅是它的子树 类似于 ConcurrentMode, 在它的节点下面才会是有一个异步渲染情况
cloneElement 1 ) 概述
对原 ReactElement 进行克隆处理返回一个新的ReactElement
2 源码分析
直接定位在 ReactElement.js // ReactElement.jsexport function cloneElement(element, config, children) {invariant(!(element null || element undefined),React.cloneElement(...): The argument must be a React element, but you passed %s.,element,);let propName;// Original props are copiedconst props Object.assign({}, element.props);// Reserved names are extractedlet key element.key;let ref element.ref;// Self is preserved since the owner is preserved.const self element._self;// Source is preserved since cloneElement is unlikely to be targeted by a// transpiler, and the original source is probably a better indicator of the// true owner.const source element._source;// Owner will be preserved, unless ref is overriddenlet owner element._owner;if (config ! null) {if (hasValidRef(config)) {// Silently steal the ref from the parent.ref config.ref;owner ReactCurrentOwner.current;}if (hasValidKey(config)) {key config.key;}// Remaining properties override existing propslet defaultProps;if (element.type element.type.defaultProps) {defaultProps element.type.defaultProps;}for (propName in config) {if (hasOwnProperty.call(config, propName) !RESERVED_PROPS.hasOwnProperty(propName)) {if (config[propName] undefined defaultProps ! undefined) {// Resolve default propsprops[propName] defaultProps[propName];} else {props[propName] config[propName];}}}}// Children can be more than one argument, and those are transferred onto// the newly allocated props object.const childrenLength arguments.length - 2;if (childrenLength 1) {props.children children;} else if (childrenLength 1) {const childArray Array(childrenLength);for (let i 0; i childrenLength; i) {childArray[i] arguments[i 2];}props.children childArray;}return ReactElement(element.type, key, ref, self, source, owner, props);}首先它把props首先复制过来const props Object.assign({}, element.props);然后呢把key和 ref 也复制过来 然后再进行一些处理其实就是创建一个新的 React Element其实整体的过程是跟 createElement 是差不多的只不过它是传入了一个 element然后他进行一个克隆这么一个过程
createFactory 1 ) 概述
返回一个某种类型的 ReactElement 工厂函数可以利用返回的函数来创建一个 ReactElement
2 源码分析
export function createFactory(type) {const factory createElement.bind(null, type);// Expose the type on the factory and the prototype so that it can be// easily accessed on elements. E.g. Foo /.type Foo.// This should not be named constructor since this may not be the function// that created the element, and it may not even be a constructor.// Legacy hook: remove itfactory.type type;return factory;
}这个源码比较简洁createFactory 对于写 jsx 的场景几乎是不可能用到的因为 createFactory 是对 createElement 的一个封装 createFactory 是 createElement 绑定了一个type比如说我们要去创建一个p标签的节点 如果使用 JS API去创建比如使用 createElement每次都要先传入 p然后再传入 config再传入它的children 其实我们可以先创建一个p标签的 factory 通过这个factory返回的方法我们只需要传入config和children就可以创建一个p标签而不需要重复的去传p这个字符串来表示我们要创建的是p标签的节点
