React本机并没有提供switch case语句,因为React是一个JavaScript库,而switch case语句是JavaScript的一种控制流语句,用于根据不同的条件执行不同的代码块。 在React中,可以使用if语句或者三元表达式来实现类似的功能。下面是一个示例: 代码语言:txt 复制 function MyComponent(props) { const { value } = props; le...
如果是首次渲染: 则下来会根据当前正在构建的节点的组件类型做不同的处理,源码中这块逻辑使用了大量的 switch case。 代码语言:javascript 复制 switch(workInProgress.tag){caseFunctionComponent:{...}caseClassComponent:{...}caseHostRoot:{...}caseHostComponent:{...}...} 如果非首次渲染: React 会使用一些...
return null; // 函数组件 case FunctionComponent: return updateFunctionComponent(wip); default: if (__DEV__) { console.warn('beginWork未实现的类型'); } break; } return null; }; 针对函数节点,我们调用updateFunctionComponent函数进行处理,在初始化时,主要任务是执行函数组件,然后生成此函数组件的...
注意switch内要用return 带有返回值:可以return一个组件,这样就可以实现了不同判断条件下返回不同组件界面元素 根据不同条件渲染不同组件 - switch.jsx import './creat.less'; import React from'react'; import { Tabs, Radio } from'antd'; import FormDay from'../../component/form/formDay'import Form...
classNameB=toString.call(b);//如果数据类型不相等,则返回falseif(classNameA !==classNameB) {returnfalse; }//如果数据类型相等,再根据不同数据类型分别判断switch(classNameA) {case'[object RegExp]':case'[object String]'://进行字符串转换比较return'' + a === '' +b;case'[object Number]':/...
functioncompleteWork(current:Fiber|null,workInProgress:Fiber,renderLanes:Lanes,):Fiber|null{constnewProps=workInProgress.pendingProps;switch(workInProgress.tag){caseIndeterminateComponent:caseLazyComponent:caseSimpleMemoComponent:caseFunctionComponent:caseForwardRef:caseFragment:caseMode:caseProfiler:caseContextConsum...
functionbeginWork(current:Fiber|null,workInProgress:Fiber,renderLanes:Lanes,):Fiber|null{//...if(current!==null){//update时//...}else{//mount时didReceiveUpdate=false;}//...//根据tag不同,创建不同的子Fiber节点switch(workInProgress.tag){caseIndeterminateComponent:// ...省略caseLazyComponent:...
{ Component } from "react";class Count extends Component{constructor(props){super(props);this.state = {count:0}}render(){return (<>count:{this.state.count}绑定点击事件</>)}componentDidMount(){//自定义dom事件,也是同步修改document.querySelector('#btn').addEventListener('click',()=>{this....
switch (workInProgress.tag) { case IndeterminateComponent: // ...省略 case LazyComponent: // ...省略 case FunctionComponent: { const Component = workInProgress.type; const unresolvedProps = workInProgress.pendingProps; const resolvedProps = ...
commit阶段:该阶段 React 会提交更新,同时在这个阶段,React 会执行像componentDidMount和componentDidUpdate之类的生命周期函数。 所以React.Profiler 的分析范围是有限的,比如我们最开始的 input 示例,通过 React Profiler 是分析不出来性能问题的。 性能改进