内容简介:核心的API三种ref的使用方式function component是没有实例的,可以用这个API进行传递
核心的API
API
createElement
react/ReactElement.js
createElement(type, config, children)
-> ReactElement = function(type, key, ref, self, source, owner, props){}
Component
import {Component, PureComponent} from './ReactBaseClasses';
function Component(props, context, updater){}
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
// react-dom中去实现的
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
function PureComponent(props, context, updater) {
this.props = props;
this.context = context;
// If a component has string refs, we will assign a different object later.
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
}
const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
// Avoid an extra prototype jump for these methods.
Object.assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;
ref
三种ref的使用方式
- string ref 不推荐,废弃
- function ref
- createRef react提供了一个api
// react/createReactRef.js
export function createRef(): RefObject {
const refObject = {
current: null,
};
if (__DEV__) {
Object.seal(refObject);
}
return refObject;
}
forwardRef
function component是没有实例的,可以用这个API进行传递
// demo
React.forwardRef((props, ref)=>{})
源码文件
// react/forwardRef.js
export default function forwardRef<Props, ElementType: React$ElementType>(
render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
return {
$$typeof: REACT_FORWARD_REF_TYPE,
render,
};
}
context
- childContextType
- createContext
// react/ReactContext.js
const context: ReactContext<T> = {
$$typeof: REACT_CONTEXT_TYPE,
_calculateChangedBits: calculateChangedBits,
// As a workaround to support multiple concurrent renderers, we categorize
// some renderers as primary and others as secondary. We only expect
// there to be two concurrent renderers at most: React Native (primary) and
// Fabric (secondary); React DOM (primary) and React ART (secondary).
// Secondary renderers store their context values on separate fields.
_currentValue: defaultValue,
_currentValue2: defaultValue,
// These are circular
Provider: (null: any),
Consumer: (null: any),
};
以上所述就是小编给大家介绍的《react源码分析之二:核心api》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- axios 核心源码解读
- Disruptor 核心源码分析
- Netty 核心源码解读(开篇)
- HashMap: 通俗分析核心源码
- 读源码之Spring 核心内容
- ReactiveCocoa 源码解析之核心流程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
高性能网站建设指南(第二版)
Steve Souders / 刘彦博 / 电子工业出版社 / 2015-5 / 55.00元
《高性能网站建设指南:前端工程师技能精髓》结合Web 2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术,全面涵盖浏览器端性能问题的方方面面。在《高性能网站建设指南:前端工程师技能精髓》中,作者给出了14条具体的优化......一起来看看 《高性能网站建设指南(第二版)》 这本书的介绍吧!