内容简介:核心的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 源码解析之核心流程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Building Web Reputation Systems
Randy Farmer、Bryce Glass / Yahoo Press / 2010 / GBP 31.99
What do Amazon's product reviews, eBay's feedback score system, Slashdot's Karma System, and Xbox Live's Achievements have in common? They're all examples of successful reputation systems that enable ......一起来看看 《Building Web Reputation Systems》 这本书的介绍吧!