内容简介:核心的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 源码解析之核心流程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据库系统实现
加西亚-莫利纳(Hector Garcia-Molina)、Jeffrey D.Ullman、Jennifer Widom / 杨冬青、吴愈青、包小源 / 机械工业出版社 / 2010-5 / 59.00元
《数据库系统实现(第2版)》是斯坦福大学计算机科学专业数据库系列课程第二门课的教科书。书中对数据库系统实现原理进行了深入阐述,并具体讨论了数据库管理系统的三个主要成分——存储管理器、查询处理器和事务管理器的实现技术。此外,第2版充分反映了数据管理技术的新进展,对内容进行了扩充,除了在第1版中原有的“信息集成”一章(第10章)中加入了新的内容外,还增加了两个全新的章:“数据挖掘”(第11章)和“数据......一起来看看 《数据库系统实现》 这本书的介绍吧!