React-源码解析-生命周期(自定义组件)

最新推荐文章于 2024-05-30 15:07:12 发布
最新推荐文章于 2024-05-30 15:07:12 发布
阅读量93 收藏
点赞数
分类专栏： 前端 文章标签： React.js 前端
原文链接：https://www.mk2048.com/blog/blog.php?id=00k02jh10j&title=React-%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%28%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%29
版权

image

自定义组件(生命周期)

createClass 是创建自定义组件的入口方法，负责管理生命周期中的 getDefaultProps。该方 法在整个生命周期中只执行一次，这样所有实例初始化的 props 将会被共享。 通过 createClass 创建自定义组件，利用原型继承 ReactClassComponent 父类，按顺序合并 mixin，设置初始化 defaultProps，返回构造函数。 当使用 ES6 classes 编写 React 组件时，class MyComponent extends React.Component 其实就 是调用内部方法 createClass 创建组件

  /**
   * 创建自定义组件
   */
  function createClass(spec) {
    //创建自定义组件
    var Constructor = identity(function (props, context, updater) {

      // 自动绑定
      if (this.__reactAutoBindPairs.length) {
        bindAutoBindMethods(this);
      }

      this.props = props;
      this.context = context;
      this.refs = emptyObject;
      this.updater = updater || ReactNoopUpdateQueue;

      this.state = null;
      //ReactClass没有构造器,通过getInitialState和componentWillMount来代替
      var initialState = this.getInitialState ? this.getInitialState() : null;
      this.state = initialState;
    });
    //原型链继承父类
    Constructor.prototype = new ReactClassComponent();
    Constructor.prototype.constructor = Constructor;
    Constructor.prototype.__reactAutoBindPairs = [];
    //合并mixin
    injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));

    mixSpecIntoComponent(Constructor, IsMountedMixin);
    mixSpecIntoComponent(Constructor, spec);

    // 所有的mixin合并后初始化defaultProps(在整个生命周期中,getDefaultProps只执行一次)
    if (Constructor.getDefaultProps) {
      Constructor.defaultProps = Constructor.getDefaultProps();
    }

    // 减少查找并设置原型的时间
    for (var methodName in ReactClassInterface) {
      if (!Constructor.prototype[methodName]) {
        Constructor.prototype[methodName] = null;
      }
    }

    return Constructor;
  }

生命周期-挂载阶段(MOUNTING)

  1. mountComponent 负责管理生命周期中的 getInitialState、componentWillMount、render 和 componentDidMount。
  2. 由于 getDefaultProps 是通过构造函数进行管理的，所以也是整个生命周期中最先开始执行的。而 mountComponent 只能望洋兴叹，无法调用到 getDefaultProps。这就解释了为何 getDefaultProps只执行一次。
  3. 由于通过 ReactCompositeComponentBase 返回的是一个虚拟节点，所以需要利用 instantiateReactComponent去得到实例，再使用 mountComponent 拿到结果作为当前自定义元素的结果。
  4. 通过 mountComponent 挂载组件，初始化序号、标记等参数，判断是否为无状态组件，并进行对应的组件初始化工作，比如初始化 props、context 等参数。利用 getInitialState 获取初始化state、初始化更新队列和更新状态。
  5. 若存在 componentWillMount，则执行。如果此时在 componentWillMount 中调用 setState 方法， 是不会触发 re-render的，而是会进行 state 合并，且 inst.state = this._processPendingState(inst.props, inst.context) 是在 componentWillMount 之后执行的， 因此 componentWillMount 中的 this.state 并不是最新的，在 render 中才可以获取更新后的 this.state。因此，React 是利用更新队列 this._pendingStateQueue 以及更新状态 this._pendingReplaceState 和 this._pendingForceUpdate 来实现 setState 的异步更新机制。
  6. 当渲染完成后，若存在 componentDidMount，则调用。这就解释了 componentWillMount 、render 、componentDidMount 这三者之间的执行顺序。
  7. mountComponent 本质上是通过递归渲染内容的，由于递归的特性，父组件的componentWillMount 在其子组件的 componentWillMount 之前调用，而父组件的 componentDidMount在其子组件的 componentDidMount 之后调用。
  /**
   * 初始化组件,渲染标记,注册事件监听器
   */
  mountComponent: function(transaction,hostParent, hostContainerInfo, context, ) {
    //当前元素对应的上下文
    this._context = context;
    this._mountOrder = nextMountID  ;
    this._hostParent = hostParent;
    this._hostContainerInfo = hostContainerInfo;
    var publicProps = this._currentElement.props;
    var publicContext = this._processContext(context);
    var Component = this._currentElement.type;
    var updateQueue = transaction.getUpdateQueue();
    var doConstruct = shouldConstruct(Component);
    //初始化公共类
    var inst = this._constructComponent(doConstruct, publicProps, publicContext,updateQueue,);
    var renderedElement;
    // 用于判断组件是否为stateless,无状态组件没有状态更新队列,只专注渲染
    if (!doConstruct && (inst == null || inst.render == null)) {
      renderedElement = inst;
      warnIfInvalidElement(Component, renderedElement);
      inst = new StatelessComponent(Component);
      this._compositeType = CompositeTypes.StatelessFunctional;
    } else {
      if (isPureComponent(Component)) {
        this._compositeType = CompositeTypes.PureClass;
      } else {
        this._compositeType = CompositeTypes.ImpureClass;
      }
    }
    // 这些初始化参数本应该在构造器中设置,在此设置是为了便于进行简单的类抽象
    inst.props = publicProps;
    inst.context = publicContext;
    inst.refs = emptyObject;
    inst.updater = updateQueue;
    this._instance = inst;
    // 将实例存储为一个引用
    ReactInstanceMap.set(inst, this);
    //初始化state
    var initialState = inst.state;
    if (initialState === undefined) {
      inst.state = initialState = null;
    }
    //初始化更新队列
    this._pendingStateQueue = null;
    this._pendingReplaceState = false;
    this._pendingForceUpdate = false;
    var markup;
    //如果挂载时发生错误
    if (inst.unstable_handleError) {
      markup = this.performInitialMountWithErrorHandling(renderedElement,hostParent, hostContainerInfo,transaction,context,);
    } else {
      //执行初始化挂载
      markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction,context,);
    }
    //如果存在componentDidMount,则调用
    if (inst.componentDidMount) {
      transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
    }
    return markup;
  },
  
  performInitialMountWithErrorHandling: function( renderedElement,  hostParent, hostContainerInfo, transaction, context, ) {
    var markup;
    var checkpoint = transaction.checkpoint();
    try {
      //捕捉错误,如果没有错误,则初始化挂载
      markup = this.performInitialMount( renderedElement,  hostParent, hostContainerInfo, transaction, context, );
    } catch (e) {
      transaction.rollback(checkpoint);
      this._instance.unstable_handleError(e);
      if (this._pendingStateQueue) {
        this._instance.state = this._processPendingState( this._instance.props, this._instance.context, );
      }
      checkpoint = transaction.checkpoint();
      //如果捕捉到错误,则执行unmountComponent()后在初始化挂载
      this._renderedComponent.unmountComponent(true);
      transaction.rollback(checkpoint);
      markup = this.performInitialMount(  renderedElement, hostParent, hostContainerInfo, transaction,  context, );
    }
    return markup;
  },

  performInitialMount: function( renderedElement,  hostParent, hostContainerInfo, transaction, context, ) {
    var inst = this._instance;
    var debugID = 0;
    //如果存在componentWillMount() 就调用
    if (inst.componentWillMount) {
      inst.componentWillMount();
      //在componentWillMount时调用setState,是不会触发re-render的,而是自动合并
      if (this._pendingStateQueue) {
        inst.state = this._processPendingState(inst.props, inst.context);
      }
    }
    //如果不是无状态组件,即可开始渲染
    if (renderedElement === undefined) {
      renderedElement = this._renderValidatedComponent();
    }
    var nodeType = ReactNodeTypes.getType(renderedElement);
    this._renderedNodeType = nodeType;
    // 得到 _currentElement 对应的 component 类实例
    var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY );
    this._renderedComponent = child;
    //render递归渲染
    var markup = ReactReconciler.mountComponent( child,  transaction,  hostParent,  hostContainerInfo,
                                                  this._processChildContext(context),  debugID,);
    return markup;
  },

生命周期-修改阶段(RECEIVE_PROPS)

  1. updateComponent 负责管理生命周期中的 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render和 componentDidUpdate。
  2. 首先通过 updateComponent 更新组件，如果前后元素不一致，说明需要进行组件更新。
  3. 若存在 componentWillReceiveProps，则执行。如果此时在 componentWillReceiveProps 中调用 setState，是不会触发 re-render 的，而是会进行 state 合并。 且在 componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中也还是无法获取到更新后的 this.state， 即此时访问的 this.state 仍然是未更新的数据，需要设置 inst.state = nextState 后才可以，因此只有在 render 和 componentDidUpdate 中才能获取到更新后的 this.state。
  4. 调用 shouldComponentUpdate 判断是否需要进行组件更新，如果存在 componentWillUpdate，则执行。updateComponent 本质上也是通过递归渲染内容的，由于递归的特性，父组件的 componentWillUpdate 是在其子组件的 componentWillUpdate 之前调用的，而父组件的 componentDidUpdate也是在其子组件的 componentDidUpdate 之后调用的。
  5. 当渲染完成之后，若存在 componentDidUpdate，则触发，这就解释了 componentWillReceiveProps、componentWillUpdate、render、componentDidUpdate 它们之间的执行顺序。
  // receiveComponent 是通过调用 updateComponent 进行组件更新的
  receiveComponent: function(nextElement, transaction, nextContext) {
    var prevElement = this._currentElement;
    var prevContext = this._context;
    this._pendingElement = null;
    this.updateComponent(transaction,prevElement,nextElement,prevContext,nextContext,);
  },
  
  
    updateComponent: function(transaction,prevParentElement,nextParentElement,prevUnmaskedContext,nextUnmaskedContext,) {
    var inst = this._instance;
    var willReceive = false;
    var nextContext;

    // 上下文是否改变
    if (this._context === nextUnmaskedContext) {
      nextContext = inst.context;
    } else {
      nextContext = this._processContext(nextUnmaskedContext);
      willReceive = true;
    }

    var prevProps = prevParentElement.props;
    var nextProps = nextParentElement.props;

    // 新旧属性不同
    if (prevParentElement !== nextParentElement) {
      willReceive = true;
    }
    //新旧属性不同,并且存在componentWillReceiveProps,就执行componentWillReceiveProps()
    if (willReceive && inst.componentWillReceiveProps) {
      inst.componentWillReceiveProps(nextProps, nextContext);
    }
    //将新的state合并到更新队列中,此时的nextState是最新的state
    var nextState = this._processPendingState(nextProps, nextContext);
    var shouldUpdate = true;
    //根据更新队列和shouldComponentUpdate的状态来判断是否需要更新组件
    if (!this._pendingForceUpdate) {
      if (inst.shouldComponentUpdate) {
        shouldUpdate = inst.shouldComponentUpdate(nextProps,nextState,nextContext,);
      } else {
        if (this._compositeType === CompositeTypes.PureClass) {
          shouldUpdate =!shallowEqual(prevProps, nextProps) ||!shallowEqual(inst.state, nextState);
        }
      }
    }

    this._updateBatchNumber = null;
    if (shouldUpdate) {
      //重置更新队列
      this._pendingForceUpdate = false;
      //即将更新this.props,this.state,和this.context
      this._performComponentUpdate(nextParentElement,nextProps, nextState,nextContext,transaction,nextUnmaskedContext,);
    } else {
      // 如果确定组件不更新,仍然要这是props和state
      this._currentElement = nextParentElement;
      this._context = nextUnmaskedContext;
      inst.props = nextProps;
      inst.state = nextState;
      inst.context = nextContext;
    }
  },
  //在componentShouldUpdate()方法执行前调用了:就是说在调用之前将所有state操作合并
    _processPendingState: function(props, context) {
      var inst = this._instance;
      var queue = this._pendingStateQueue;
      var replace = this._pendingReplaceState;
      this._pendingReplaceState = false;
      this._pendingStateQueue = null;
      //如果队列为null,返回原state
      if (!queue) {
        return inst.state;
      }
      //如果队列中有一个更新就返回这个更新值
      if (replace && queue.length === 1) {
        return queue[0];
      }
      //如果队列中有多个更新,就将他们合并
      var nextState = Object.assign({}, replace ? queue[0] : inst.state);
      for (var i = replace ? 1 : 0; i < queue.length; i  ) {
        var partial = queue[i];
        Object.assign(
          nextState,
          typeof partial === 'function'
            ? partial.call(inst, nextState, props, context)
            : partial,
        );
      }
  
      return nextState;
    },
  
    /**
   * 当组件需要更新时,调用
   */
  _performComponentUpdate: function(nextElement,nextProps,nextState,nextContext,transaction,unmaskedContext) {
    var inst = this._instance;
    var hasComponentDidUpdate = Boolean(inst.componentDidUpdate);
    var prevProps;
    var prevState;
    var prevContext;
    //如果存在componentDidUpdate,则将当前的props,state和context保存一份
    if (hasComponentDidUpdate) {
      prevProps = inst.props;
      prevState = inst.state;
      prevContext = inst.context;
    }
    //执行componentWillUpdate
    if (inst.componentWillUpdate) {
      inst.componentWillUpdate(nextProps, nextState, nextContext);
    }
    //更新this.props,this.state,this.context
    this._currentElement = nextElement;
    this._context = unmaskedContext;
    inst.props = nextProps;
    inst.state = nextState;
    inst.context = nextContext;
    //渲染组件
    this._updateRenderedComponent(transaction, unmaskedContext);
    //当组件完成更新后,如果存在ComponentDidUpdate,则调用
    if (hasComponentDidUpdate) {
      transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst,prevProps, prevState,prevContext,),inst,);
    }
  },
  
    /**
   * 调用render渲染组件
   */
  _updateRenderedComponent: function(transaction, context) {
    var prevComponentInstance = this._renderedComponent;
    var prevRenderedElement = prevComponentInstance._currentElement;
    var nextRenderedElement = this._renderValidatedComponent();

    var debugID = 0;
    //如果需要更新,则调用ReactReconciler.receiveComponent()继续更新组件
    if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
      ReactReconciler.receiveComponent(prevComponentInstance,nextRenderedElement,transaction,this._processChildContext(context),);
    } else {
      //如果不需要更新,则渲染组件
      var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance);
      ReactReconciler.unmountComponent(prevComponentInstance, false);

      var nodeType = ReactNodeTypes.getType(nextRenderedElement);
      this._renderedNodeType = nodeType;
      //得到 nextRenderedElement 对应的 component 类实例
      var child = this._instantiateReactComponent( nextRenderedElement,nodeType !== ReactNodeTypes.EMPTY );
      this._renderedComponent = child;
      //使用render递归渲染
      var nextMarkup = ReactReconciler.mountComponent(child,transaction,this._hostParent,this._hostContainerInfo,this._processChildContext(context),debugID,);

      this._replaceNodeWithMarkup(oldHostNode, nextMarkup,prevComponentInstance,);
    }
  },

生命周期-卸载阶段(UNMOUNTING)

  1. unmountComponent 负责管理生命周期中的 componentWillUnmount。
  2. 如果存在 componentWillUnmount，则执行并重置所有相关参数、更新队列以及更新状态，如果此时在 componentWillUnmount 中调用 setState，是不会触发 re-render 的， 这是因为所有更新队列和更新状态都被重置为 null，并清除了公共类，完成了组件卸载操作
  unmountComponent: function(safely) {
    if (!this._renderedComponent) {
      return;
    }

    var inst = this._instance;
    //如果存在componentWillUnmount,则调用
    if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) {
      inst._calledComponentWillUnmount = true;

      if (safely) {
        var name = this.getName()   '.componentWillUnmount()';
        ReactErrorUtils.invokeGuardedCallback(
          name,
          inst.componentWillUnmount.bind(inst),
        );
      } else {
          inst.componentWillUnmount();
      }
    }
    //如果组件已经渲染,则对组件进行componentWillUnmount()
    if (this._renderedComponent) {
      ReactReconciler.unmountComponent(this._renderedComponent, safely);
      this._renderedNodeType = null;
      this._renderedComponent = null;
      this._instance = null;
    }
    //重置相关参数、更新队列以及更新状态
    this._pendingStateQueue = null;
    this._pendingReplaceState = false;
    this._pendingForceUpdate = false;
    this._pendingCallbacks = null;
    this._pendingElement = null;

    this._context = null;
    this._rootNodeID = 0;
    this._topLevelWrapper = null;
    //删除这个实例
    ReactInstanceMap.remove(inst);
  },

无状态组件

  1. 无状态组件只有一个render方法,并没有组件类的实例化过程,也没有实例返回
  2. 无状态组件没有状态,没有生命周期,就是接受props渲染生成dom结构是一个纯粹为渲染而生的组件,
//无状态组件只有一个render方法
function StatelessComponent(Component) {}
StatelessComponent.prototype.render = function() {
  var Component = ReactInstanceMap.get(this)._currentElement.type;
  //没有state状态
  var element = Component(this.props, this.context, this.updater);
  return element;
};

更多专业前端知识，请上 【猿2048】www.mk2048.com
qq_36320160
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 生命周期 —— 从源码理解
lalalala~
10-26 2299
react生命周期理解 渲染的过程 react 生命周期在不同状态下的执行顺序 当首次装载组件时，按顺序执行 getDefaultProps、getInitialState、componentWillMount、render 和 componentDidMount； 当卸载组件时，执行 componentWillUnmount； 当重新装载组件时，此时按顺序执行 getInitia...
react-native-smooth-pull-to-refresh:自定义拉动以刷新React Native的组件
05-02
安装安装套件$ npm install --save react-native-smooth-pull-to-refresh# or$ yarn add react-native-smooth-pull-to-refresh示范项目基本用法import { PullToRefreshView } from "react-native-smooth-pull-to-...
react-scrollbars-custom:最好的React自定义滚动条组件
05-02
react-scrollbars-custom ×× ×× 本机浏览器的滚动行为-它不模拟滚动，仅显示自定义滚动条，仍以本机滚动 跨浏览器和跨平台-无关紧要的地方和方式，滚动条在各处看起来都一样 终极性能-60 FPS（使用RAF）和高度优化的代码 无需额外的样式表-现成的内联样式最少，也可以根据需要自己设置样式 完全可定制-想要河马作为滚动条拇指吗？ 好吧..我不判断你，你有空做！ 滚动条嵌套 总测试覆盖率 iOS的动量滚动 RTL支持（） 内容大小翻译（） 正确的页面缩放处理（不显示本地滚动条） 安装 npm install react-scrollbars-custom # or via yarn yarn add react-scrollbars-custom 安装注意事项： 该库是用ES6 +编写的，并提供了已编译和未编译的版本： package.json mai
React生命周期详解
热门推荐
Amelian的博客
08-31 1万+
前言 react生命周期在各个阶段的执行顺序是有所差异的，接下来我们将详细解析react在各个阶段生命周期的执行顺序，以及各个生命周期在组件中充当的作用（以下生命周期指的是react16之后的版本）......
React——组件生命周期
Memorial*的博客
07-12 140
需求: 自定义组件 1. 让指定的文本做显示/隐藏的渐变动画 2. 切换持续时间为2S 3. 点击按钮从界面中移除组件界面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>10_ComponentLife</title> </head> <body> <div id="example"></div&...
React 的组件生命周期
yinge0508的博客
02-21 88
React 的组件分为函数组件和class组件，下面主要是class组件的一些API; 定义class组件，需要继承React.Component ，在该子类中必须要定义一个render函数， 挂载时生命周期调用： 1，constructor() 2, static getDerivedStateFromProps() 3, render() 4, componentDidMount() ...
react 组件的生命周期
huangjianfeng21的博客
06-29 161
React组件的生命周期介绍 React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作 组件对象从创建到死亡它会经历特定的生命周期阶段 组件的三个生命周期状态: Mount：插入真实 DOM，Update：被重新渲染，Unmount：被移出真实 DOM 生命周期流程 需求: ...
RC-Field-Form源码解析与实现
问白的博客
08-30 561
本文中涉及到的关键npm包的版本信息如下：react 的版本为18.2.0rc-field-form的版本为1.37.0是一个非常受欢迎的前端表单组件库，AntDesign中的Form表单就是基于实现的。今天就来解析一下的源码部分，并且会自己实现一个相同功能的。
使用create-react-app创建react脚手架
52赫兹的博客
11-19 702
项目的整体技术架构为: react + webpack + es6 + eslint ## 一 react脚手架安装项目 1. npm i -g create-react-app // 全局安装create-react-app库，用来创建react脚手架项目的库，查看是否安装可以通过create-react-app -v 或者 npm root -a 得到一个路径，通过路径查看全局安装了什么包 2. create-react-app hello-react ..
老生常谈js-react组件生命周期
10-19
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-countdown：React的可自定义倒数组件
02-06
React的可自定义倒计时组件。 入门 您可以通过npm或yarn安装模块： npm install react-countdown --save yarn add react-countdown 动机 首先，这是一个小型Web应用程序的一部分，其想法是将倒计时组件与主程序包...
react-dropdown-select:可自定义的下拉菜单用于做出React
04-28
React下拉选择可自定义的下拉菜单用于做出React特征可通过prop s配置通过渲染道具回调（可访问内部道具，状态和方法），所有内部组件的总自定义组件覆盖可通过CSS（或自定义组件）设置样式门户支持在本地DOM树之外...
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 328
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 408
记录一次前端页面崩溃的产生及处理
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 875
Web前端三大主流框架介绍：Angular、React、Vue
【JS实战案例汇总——不定时更新版】
微木
05-30 214
练习JS的实用案例
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 768
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
react-ts组件如何使用自定义属性
05-19
在 React 中使用自定义属性的方法与普通的 HTML 元素类似。可以使用 `props` 对象来传递自定义属性，然后在组件内部使用它们。在 TypeScript 中，需要先定义组件的属性类型。 以下是一个示例： ```tsx import React from 'react'; interface Props { customProp: string; } const MyComponent: React.FC<Props> = ({ customProp, children }) => { return ( <div data-custom-attribute={customProp}> {children} </div> ); }; export default MyComponent; ``` 在上面的代码中，我们定义了一个名为 `customProp` 的自定义属性，并将其类型定义为 `string`。在组件内部，我们使用 `data-custom-attribute` 属性来设置自定义属性，并将属性值设置为 `customProp`。 在使用该组件时，可以将自定义属性作为 `props` 对象的一个属性传递给组件，如下所示： ```tsx import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return ( <MyComponent customProp="some value"> Hello, World! </MyComponent> ); }; export default App; ``` 在上述示例中，我们将自定义属性 `customProp` 的值设置为 `"some value"`，并将其作为 `props` 对象的一个属性传递给 `MyComponent` 组件。组件内部将使用该值设置 `data-custom-attribute` 属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值