JSX语法基础和React自定义组件

超、凢脫俗 2023-07-19 14:30 17阅读 0赞

### 1、 `JSX` 语法基础 ###

`React` 使用 `JSX` 来替代常规的`JavaScript`。

`JSX` 是按照 `XML` 语法规范 的 `JavaScript` 语法扩展。

`JSX` 有以下优点：

*  `JSX` 执行更快，因为它在编译为 JavaScript 代码后进行了优化；
 *  它是类型安全的，在编译过程中就能发现错误；
 *  使用 `JSX` 编写模板更加简单快速。

\*\*`JSX` 语法的本质：\*\*并不是直接把 `JSX` 渲染到页面上，而是内部先转换成了 `createElement` 形式，再渲染的。

\*\*`JSX` 注释：\*\*推荐使用 `{/* 这是注释 */}`；

\*\*`JSX`中添加class类名：\*\*需要使用 `className` 来替代 `class` ；`htmlFor` 替代 `label` 的 `for` 属性；

在`JSX`创建DOM的时候，所有节点必须有唯一的根元素进行包裹；

在`JSX`语法中，标签必须成对出现，如果是单标签，则必须自闭和；

代码示例：

const mydiv = <div>这是一个Div标签</div>;
    ReactDOM.render(mydiv, document.getElementById('root'));

使用组件化开发代码示例：

`App.js` 组件文件代码

import React from 'react';
    
    class App extends React.Component{ 
      render(){ 
        return (
          <div>
            { 1+1}
            <hr/>
            Hello，Reactjs！！
          </div>
        );
      }
    }
    
    export default App;

在其他文件中使用 `JSX` 语法引用组件：

import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    
    ReactDOM.render(<App />, document.getElementById('root'));

**渲染数字**

import React from 'react';
    import ReactDOM from 'react-dom';
    
    let a = 10;
    
    ReactDOM.render(
        <div>{ a}</div>
    , document.getElementById('root'));

**渲染字符串**

import React from 'react';
    import ReactDOM from 'react-dom';
    
    let str = 'hello react';
    
    ReactDOM.render(
        <div>{ str}</div>
    , document.getElementById('root'));

**渲染布尔类型**

import React from 'react';
    import ReactDOM from 'react-dom';
    
    let rel = true;
    
    ReactDOM.render(
        <div>{ rel ? '结果为真' : '结果为假'}</div>
    , document.getElementById('root'));

**渲染属性值**

import React from 'react';
    import ReactDOM from 'react-dom';
    
    let title = "this is a div";
    
    ReactDOM.render(
        <div title={ title}>Hello React</div>
    , document.getElementById('root'));

**渲染标签对象**

import React from 'react';
    import ReactDOM from 'react-dom';
    
    const h1 = <h1>Hello React!</h1>;
    
    ReactDOM.render(
        <div>
            { h1}
        </div>
    , document.getElementById('root'));

**渲染数组**

import React from 'react';
    import ReactDOM from 'react-dom';
    
    const arr = [
        <h1>第1行</h1>,
        <h2>第2行</h2>,
    ];
    
    ReactDOM.render(
        <div>
            { arr}
        </div>
    , document.getElementById('root'));

将普通数组转为 `JSX` 数组，并渲染到页面中

> 解决 Warning: Each child in a list should have a unique “key” prop.

方法一：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    //原数组
    const arr = ['html','css','vue'];
    //新数组
    const newArr = [];
    //forEach()方法没有返回值
    arr.forEach((item,index) => { 
        const temp = <h2 key={ index}>{ item}</h2>
        newArr.push(temp);
    });
    
    ReactDOM.render(
        <div>
            { newArr}
        </div>
    , document.getElementById('root'));

方法二：

import React from 'react';
    import ReactDOM from 'react-dom';
    import TodoList from './TodoList';
    import './style.css';
    
    //原数组
    const arr = ['html','css','vue'];
    
    ReactDOM.render(
        <div>
        	{ /* map()方法有返回值 */}
            { arr.map((item,index) => { 
            return <h2 key={ index}>{ item}</h2>
            })}
        </div>
    , document.getElementById('root'));

### 2、React组件 ###

**组件的概念**

React 应用都是构建在组件之上。

组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。

**组件的特点**

组件化的概念在后端早已存在多年，只不过近几年随着前端的发展，这个概念在前端开始被频繁提及，特别是在MV\*的框架中。

前端中的“组件化”这个词，在UI这一层通常指“标签化”，也就是把大块的业务界面，拆分成若干小块，然后进行组装。

狭义的组件化一般是指标签化，也就是以自定义标签（自定义属性）为核心的机制。

广义的组件化包括对数据逻辑层业务梳理，形成不同层级的能力封装。

*  标准性
    
    任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
 *  组合性
    
    组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。
 *  重用性
    
    任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。
 *  可维护性
    
    任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。

**函数组件**

无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类，通过函数形式或者 `ES6` 箭头 `function`的形式在创建，并且该组件是无state状态的。具体的创建形式如下

import React from 'react';
    
    //定义一个React组件
    function App() { 
      return (
        <div>
          hello React...
        </div>
      );
    }
    
    export default App;

**class组件**

`React.Component` 是以 `ES6` 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 `React.Component` 形式如下

import React from 'react';
    
    //定义一个React组件
    class App extends React.Component{ 
      render(){ 
        return (
          <div>
            Hello，Reactjs！！
          </div>
        );
      }
    }
    
    export default App;

在其他文件中引用组件

import React from 'react';
    import ReactDOM from 'react-dom';
    //App组件，组件要求大写字母开头
    import App from './App';
    
    ReactDOM.render(<App />, document.getElementById('root'));

**函数组件和class组件的区别**

用构造函数创建出来的组件，叫做“无状态组件”；

用class关键字创建出来的组件，叫做“有状态组件”；

有状态组件和无状态组件之间的本质区别是**有无state属性**。

> 注意：
> 
> 使用`class` 关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；
> 
> 使用`function`创建的组件，只有`props`，没有自己的私有数据和生命周期函数；

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件

<table> 
 <thead> 
  <tr> 
   <th align="center">区别</th> 
   <th align="center">函数组件</th> 
   <th align="center">class组件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">是否有 <code>this</code></td> 
   <td align="center">没有</td> 
   <td align="center">有</td> 
  </tr> 
  <tr> 
   <td align="center">是否有生命周期</td> 
   <td align="center">没有</td> 
   <td align="center">有</td> 
  </tr> 
  <tr> 
   <td align="center">是否有状态 <code>state</code></td> 
   <td align="center">没有</td> 
   <td align="center">有</td> 
  </tr> 
 </tbody> 
</table>