内容简介:核心的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 源码解析之核心流程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
疯狂科学家大本营
Bei Er Fei Ao Er / 本书翻译组 译、黄晓庆 周宇煜 张为民 审译 / Science Press / 2012-1-5 / 48.00元
美国最棒的创意工场不是贝尔实验室,不是硅谷,也不是麻省理工学院的媒体实验室,而是由五角大楼领导的绝密军事机构DARPA——国防高级研究计划局。DARPA是由美国前总统艾森豪威尔建立的军事部门,创建的目的是为了回应苏联的太空计划。 虽然DARPA属于政府机构,但是没有冷冰 冰的氛围和官僚做派,那里的科学家偏爱牛仔裤和运动鞋。不过他们最爱的还是在各个领域寻找颠覆性创意。从航空航天、IT,到能源领......一起来看看 《疯狂科学家大本营》 这本书的介绍吧!