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

React 前端之家
前端之家收集整理的这篇文章主要介绍了React 相关方法（API）介绍－元素与组件操作，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。


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


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


1.React@H_404_4@引用

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

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

<!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@H_404_4@模块系统（如：Node.js）中，使用require@H_404_4@来引用React：

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

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


2. 元素操作API

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

2.1 创建元素：React.createElement()@H_404_4@

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

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

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

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

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

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

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()@H_404_4@

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

    React.createElement('div');
     

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

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

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

     

     
     
     

     2.3React.DOM@H_404_4@命名空间
     

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

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

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

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

       
       
       

       2.4 有效元素判断：isValidElement()@H_404_4@
       

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

      boolean isValidElement(* object)
       

       示例如下：
       

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

       
       
       

       3. 组件操作API
       

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

       
       
       

       3.1 创建组件类：createClass()@H_404_4@
       

      ReactClass createClass(object specification)
       

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

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

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

       
       
       

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

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

       

       
       
       

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

      factoryFunction createFactory(
  string/ReactClass type
)
       

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

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

       

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

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

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

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

       
 
      React@H_404_4@提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。
       
 
       
       
       
 
         
  
      1. React引用
        2.  
  
      2. 元素操作API 
    
        3.  
  
      3. 组件操作API 
    
        4.  
 
       
 
       
       
       
 
      React@H_404_4@引用
       
 
      CMD）两种规范引用。
       
 
      React@H_404_4@是全局的，可以像下现这样引用：
       
 
      <!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@H_404_4@来引用React：
       
 
      // 引用React
var React = require('react');

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

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

       
 
      createElement()@H_404_4@方法操作如下：
       
 
      createElement.html
       
 
       
       
       
 
      React.cloneElement()@H_404_4@
       
 
      ReactElement@H_404_4@） 
  
    •  示例，已有如下元素：
       
 
      React.createElement('div');
       
 
      cloneElement.html：
       
 
       
       
       
 
      React.DOM@H_404_4@命名空间
       
 
      React.createElement()@H_404_4@方法的封装，通过这个命名空间也以快捷的创建各个HTML元素。
       
 
      ReactElement@H_404_4@，其参数如下：
       
 
        type@H_404_4@。以下两种方式执行结果相同：
         
 
        React.createElement('div');
React.DOM.div();
         
 
         
         
         
 
        isValidElement()@H_404_4@
         
 
        ReactElement@H_404_4@。
         
 
        boolean isValidElement(* object)
         
 
         示例如下：
         
 
        var div = React.createElement('div');
React.isValidElement(div);  // true
React.isValidElement(document.getElementById('example')); // fase
         
 
         
         
         
 
         3. 组件操作API
         
 
        ReactElement@H_404_4@的封装，在React中组件被认为是最小的功能分离点。合理的利用组件，可以解耦业务复杂度，更可以高效的完成UI的编写。
         
 
         
         
         
 
        createClass()@H_404_4@
         
 
        ReactClass createClass(object specification)
         
 
        render()@H_404_4@方法，并且返回一个单个子级，而其内部可能会有很深的子级结构。
         
 
        createClass.html）：
         
 
         
         
         
 
        JSX@H_404_4@语法引用组件外，还可以使用以下两种方法：
         
 
           
  
        1. 使用ReactElement@H_404_4@
          2.  
  
        2. 使用ReactElement@H_404_4@
          3.  
 
         
 
         
         
         
 
        createFactory()@H_404_4@
         
 
        factoryFunction createFactory(
  string/ReactClass type
)
         
 
        ReactElements@H_404_4@的工厂函数：
         
 
          ReactClass@H_404_4@ 
 
         
 
        createFactory.html）：
         
 
        cerateElement()@H_404_4@方法：
         
 
      • 
      
                 
              
    • 
            
    
          
    
          
          
          
    
            
    
              
    


    
            
    
          
    

          
    
            
    
              
    
                  
    
    猜你在找的React相关文章
    

    
                                    
    react使用moment进行日期格式化
    
                                
    导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
    
                                
                                    
                            
    

    
                                    
    推荐使用并手写实现redux-actions原理
    
                                
    @ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
    
                                
                                    
                            
    

    
                                    
    【译】值得推荐的十大React Hook 库
    
                                
    十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
    
                                
                                    
                            
    

    
                                    
    React生命周期
    
                                
    React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
    
                                
                                    
                            
    

    
                                    
    React虚拟DOM的理解
    
                                
    React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
    
                                
                                    
                            
    

    



    
                                    
    使用react-native-vector-icons（RN0.6+）
    
                                
    1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
    
                                
                                    
                            
    

    
                                    
    React中的Props, State 与 render 函数
    
                                
    React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
    
                                
                                    
                            
    

    
                                    
    React开发环境准备
    
                                
    react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
    
                                
                                    
                            
    

    
                                    
    React组件拆分与传值
    
                                
    组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
    
                                
                                    
                            
    

    
                                    
    React组件的简单演示
    
                                
    src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
    
                                
                                    
                            
    

    



    
            
    
          
    
        
    
        
        
        
        
    
          
          
    
            
    
              
    
                
                
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    
                
    
              
    
            
    
          
    
          
         
          
    
            
    
              
     



              
    
            
    
          
    
          
          
          
          
    
            
    
              
    
                
                
              
    
            
    
          
    
          


          
          
    
            
    
              
    
                
                
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作