React 相关方法API介绍－元素与组件操作

分类：React作者：编程之家用户


JSX可以减少定义组件的复杂性，但对于React来说JSX并不是必须的，JSX标签最终会被转换为原生的JavaScript。除使用JSX语法外，还可以使用React提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。


  1. React引用
  2. 元素操作API
  3. 组件操作API


1.React引用

React是React库的入口，React中所有的方法都是通过该对象调用，React支持AMD和CommonJS（CMD）两种规范引用。

AMD规范的预编译包，React是全局的，可以像下现这样引用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!--引用React-->
    <script src="build/react.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
     // 使用用React
     React.render(……);
    </script>
  </body>
</html>

CommonJS模块系统（如：Node.js）中，使用require来引用React：

// 引用React
var React = require('react');

// 使用React
React.render(……);


2. 元素操作API

使用非JSX语法创建组件，首先要创建React元素（ReactElement）。React提供了创建元素、复制元素等方法。

2.1 创建元素：React.createElement()

ReactElement createElement(
  string/ReactClass type,[object props],[children ...]
)

该方法创建并返回一个ReactElement对象，其参数如下：

  • type，可以是一个HTML标签或是一个React组件（ReactClass）
  • props，可选参数，表示对象的属性
  • children，第三个参数及其后的参数都会被认为是元素的子元素
  • 返回值：ReactElement对象

示例，创建一个如下结构的组件：

<div className="myClass">
  <h2>itbilu.com</h2><hr/>
</div>

使用createElement()方法操作如下：

ReactDOM.render(
  React.createElement('div',{className:'myClass'},React.createElement('h2',null,'itbilu.com'),React.createElement('hr')
  ),document.getElementById('example')
);

// itbilu.com

完整代码：createElement.html


2.2 元素克隆：React.cloneElement()

ReactElement cloneElement(
  ReactElement element,sans-serif; font-size:14px; line-height:20px"> 该方法会从已有的ReactElement中复制，并返回一个新的element，一个React元素（ReactElement） 
 
  •  示例，已有如下元素：
     

    React.createElement('div');
     

    cloneElement()复制这个元素，并最终生前面示例中的HTML。复制方法如下，详见cloneElement.html：
     

    var div = React.createElement('div');

ReactDOM.render(
  React.cloneElement(div,document.getElementById('example')
);

     

     
     
     

     2.3React.DOM命名空间
     

    React.DOM命名空间中是创建各种HTML元素的工厂方法，所有的方法都是对React.createElement()方法的封装，通过这个命名空间也以快捷的创建各个HTML元素。
     

    ReactElement DOM.HTML_TAG(
  [object props],sans-serif; font-size:14px; line-height:20px"> 创建一个名HTML_TAG的ReactElement，其参数如下：
     

      React.DOM.*只是createElement()方法的快捷方式，它帮我们自动添加了createElement()方法的第一个参数type。以下两种方式执行结果相同：
       

      React.createElement('div');
React.DOM.div();
       

       
       
       

       2.4 有效元素判断：isValidElement()
       

       React提供了isValidElement()方法，用于判断传入对象是否是有效的ReactElement。
       

      boolean isValidElement(* object)
       

       示例如下：
       

      var div = React.createElement('div');
React.isValidElement(div);  // true
React.isValidElement(document.getElementById('example')); // fase
       

       
       
       

       3. 组件操作API
       

      组件（Component）是对一个或一系列ReactElement的封装，在React中组件被认为是最小的功能分离点。合理的利用组件，可以解耦业务复杂度，更可以高效的完成UI的编写。
       

       
       
       

       3.1 创建组件类：createClass()
       

      ReactClass createClass(object specification)
       

       创建并返回一个组件类（ReactClass）。组件内部必须实现render()方法，并且返回一个单个子级，而其内部可能会有很深的子级结构。
       

       示例，将前面示例中的HTML结构定义成一个组件（createClass.html）：
       

      var App = React.createClass({displayName: 'App',render: function () {
    return (React.createElement('div',this.props.children),React.createElement('hr')
    ));
  }
});
       

       
       
       

       创建组件类后，要将其渲染到页面除可以使用JSX语法引用组件外，还可以使用以下两种方法：
       

         
 
      1. 使用createElement()方法创建ReactElement
        2.  
 
      2. 使用createFactory()方法创建一个工厂函数，该函数会返回一个ReactElement
        3.  

       

       
       
       

       3.2 创建元素工厂函数：createFactory()
       

      factoryFunction createFactory(
  string/ReactClass type
)
       

       创建一个返回ReactElements的工厂函数：
       

        type，HTML标签（如：div、body等）或ReactClass 

       

       如，对前面的组件类创建一个工厂函数（createFactory.html）：
       

      var AppClass = React.createClass({displayName: 'App',React.createElement('hr')
    ));
  }
});
var App = React.createFactory(AppClass);
       

       创建后就不再需要使用JSX或cerateElement()方法：
       

      ReactDOM.render(
  App(null,document.getElementById('example')
);
       

       
 
      React提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。
       
 
       
       
       
 
         
  
      1. React引用
        2.  
  
      2. 元素操作API 
    
        3.  
  
      3. 组件操作API 
    
        4.  
 
       
 
       
       
       
 
      React引用
       
 
      CMD）两种规范引用。
       
 
      React是全局的，可以像下现这样引用：
       
 
      <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!--引用React-->
    <script src="build/react.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
     // 使用用React
     React.render(……);
    </script>
  </body>
</html>
       
 
      require来引用React：
       
 
      // 引用React
var React = require('react');

// 使用React
React.render(……);

       
 
       
       
       
 
       2. 元素操作API
       
 
      ReactElement）。React提供了创建元素、复制元素等方法。
       
 
      React.createElement()
       
 
      ReactElement对象，其参数如下：
       
 
         
  
      • ReactClass）
        •  
  
      • props，可选参数，表示对象的属性
        •  
  
      • children，第三个参数及其后的参数都会被认为是元素的子元素
        •  
  
      • 返回值：ReactElement对象
        •  
 
       
 
       示例，创建一个如下结构的组件：
       
 
      <div className="myClass">
  <h2>itbilu.com</h2><hr/>
</div>

       
 
      createElement()方法操作如下：
       
 
      createElement.html
       
 
       
       
       
 
      React.cloneElement()
       
 
      ReactElement） 
  
    •  示例，已有如下元素：
       
 
      React.createElement('div');
       
 
      cloneElement.html：
       
 
       
       
       
 
      React.DOM命名空间
       
 
      React.createElement()方法的封装，通过这个命名空间也以快捷的创建各个HTML元素。
       
 
      ReactElement，其参数如下：
       
 
        type。以下两种方式执行结果相同：
         
 
        React.createElement('div');
React.DOM.div();
         
 
         
         
         
 
        isValidElement()
         
 
        ReactElement。
         
 
        boolean isValidElement(* object)
         
 
         示例如下：
         
 
        var div = React.createElement('div');
React.isValidElement(div);  // true
React.isValidElement(document.getElementById('example')); // fase
         
 
         
         
         
 
         3. 组件操作API
         
 
        ReactElement的封装，在React中组件被认为是最小的功能分离点。合理的利用组件，可以解耦业务复杂度，更可以高效的完成UI的编写。
         
 
         
         
         
 
        createClass()
         
 
        ReactClass createClass(object specification)
         
 
        render()方法，并且返回一个单个子级，而其内部可能会有很深的子级结构。
         
 
        createClass.html）：
         
 
         
         
         
 
        JSX语法引用组件外，还可以使用以下两种方法：
         
 
           
  
        1. 使用ReactElement
          2.  
  
        2. 使用ReactElement
          3.  
 
         
 
         
         
         
 
        createFactory()
         
 
        factoryFunction createFactory(
  string/ReactClass type
)
         
 
        ReactElements的工厂函数：
         
 
          ReactClass 
 
         
 
        createFactory.html）：
         
 
        cerateElement()方法：
         
 
        版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

    • 相关推荐

    react 学习11高阶组件
    react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
    react 学习(四) 批量更新及合成事件
    我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
    react 学习(二) 实现类和函数式组件
    我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
    react 学习12实现 cloneElement
    react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
    实现简版 react 状态管理器 mobx
    mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
    mini react-window(一) 实现固定高度虚拟滚动
    我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
    react 学习(六) 函数组件实例及类组件生命周期
    本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
    mini react-window(二) 实现可知变化高度虚拟列表
    上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...
    react 学习(五) 完善 setState 及实现 ref
    上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...
    react 学习13实现 PureComponent
    我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...
    react学习(十) React 中的 context
    在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。
    react 学习(一) 实现简版虚拟 dom 和挂载
    楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...
    react 学习(三) 组件更新
    我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
    react学习(八) diff 算法实现
    前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...
    react学习(九) React 新的生命周期
    我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...
    react 学习14实现 React.memo
    上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...
    细聊Concent & Recoil , 探索react数据流的新开发模式
    开源不易，感谢你的支持，❤ star me if you like concent ^_^
    使用hel-micro制作远程antd、tdesign-react
    hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解
    setup vs 5 react hooks,助你避开"沟"中陷阱
    本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...
    setState 同步 与异步
    ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom
    pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot