React的函数组件以及类组件介绍

Posted 2022-02-19 别Null.了

目录

React组件介绍

React组件的两种创建方式

使用函数创建组件

使用类创建组件

---

React组件介绍

React组件可以将UI切分成一些独立的、可复用的部件， 这样有助于设计人员专注于构建每一个单独的部件。React组件通过Props可以接收任意的输入值， 因此Props也可以理解为参数的概念。React组件除了通过javascript函数形式实现，还可以通过ES6 Class（类）的形式实现。

组件表示页面中的部分功能，组合多个组件实现完整的页面功能。使用React就是在用组件。

 特点：可复用、独立、可组合

React组件的两种创建方式

使用组件前的引用（放在head标签中）

<!-- 导入react的核心库 -->
<script src="../js/react.development.js"></script>
<!-- 导入react的DOM库 -->
<script src="../js/react-dom.development.js"></script>
<!-- 编译器：将ES6转换为ES5 -->
<script src="../js/babel.min.js"></script>

使用函数创建组件

函数组件：使用 JS 的函数（或箭头函数）创建的组件

渲染函数组件：用函数名作为组件标签名（组件标签名可以是单标签也可以是双标签）

条件：函数名称必须以大写字母开头，以此区分组件和普通的React元素

           函数组件必须有返回值，表示该组件的结构。如果返回值为 null，表示不渲染任何内容。

function Hello()     //定义函数
  return (
     <div>这是我的第一个函数组件！</div>
   )

ReactDOM.render(<Hello />,root)   //渲染函数组件

函数组件示例：

<div id="react-div"></div>
<script type="text/babel">
     const reactDiv = document.getElementById('react-div');
     //定义一个函数(组件)
     function HelloReact()
         return <div>
                  <h2>React组件：</h2>
                  <p>我是函数组件</p>
                </div>
     
     //引用函数组件
     const FunComponent = <HelloReact/>
     const reactSpan = (
         <span>
              FunComponent     
         </span>
     )
     //进行DOM的渲染
     ReactDOM.render(reactSpan,reactDiv);

     //也可进行直接渲染函数组件
     //ReactDOM.render(<HelloReact/>,reactDiv);
</script>

示例结果：

使用类创建组件

类组件：使用ES6的class创建的组件

条件： 类名称必须以大写字母开头

            类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性

            类组件必须提供 render() 方法

            render() 方法必须有返回值，表示该组件的结构

class Hello extends React.Component 
   render() 
     return <div> Hello Class Component! </div>
   

ReactDOM.render(<Hello />, root)

类组件示例：

<div id="react-div"></div>
<script type="text/babel">
    //定义类：必须是React.Componet的子类
    class HelloReact extends React.Component
        render()
            return <div>
                    <label>姓名：
                        <input type="text"/>
                    </label>
                   </div>
        
    
    //定义标签(组件):类名就是标签名(组件名)
    const element = <HelloReact/>
    const reactDiv = (
        <div>
            element
        </div>
    )
    //组件渲染
    ReactDOM.render(reactDiv,document.getElementById('react-div'))
</script>

当项目中的组件很多，组件作为一个独立的个体，一般都会放到一个单独的JS文件中。

基本步骤：创建Hello.js--->在Hello.js中导入React--->创建组件（函数或类）--->在Hello.js中导出该组件--->在index.js中导入Hello组件--->渲染组件