react-1（jsx语法，函数/类组件，react基础语法）

最新推荐文章于 2024-06-29 15:48:07 发布

原创最新推荐文章于 2024-06-29 15:48:07 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了React的基本概念，包括jsx语法和组件的使用。详细讲解了函数组件和类组件的区别，强调类组件需要继承React.Component并重写render方法。此外，还展示了如何在HTML中使用React，包括引入react、react-dom和babel库，并提到了<React.Fragment>在处理多个子节点时的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React

React是一个用于构建用户界面的 JAVASCRIPT 库。

jsx语法

在js中写HTML就是jsx语法

jsx语法
const temp = <h3>temp</h3>; //temp就是react元素

jsx语法
function MyCom(props){
      // props是父组件给子组件传参存放的位置，是一个对象
      // 变量渲染
      let test = 'test1';
      // 返回的是模板
      return (
        <div>
          <h1>hello{test}</h1>
          <h2>world{props.stua.name}</h2>
        </div>
      );
    }

组件分为函数组件和类组件

函数组件

定义组件最简单的方式就是编写 JavaScript 函数，该函数是一个有效的 React 组件，因为它接收

唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数

组件”，因为它本质上就是 JavaScript 函数。

function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
}

类组件

类组件有构造器，参数为props

类组件要求继承React.Component,且要求必须重写render方法，代表当前模板的返回。

class Columns extends React.Component { 
    constructor(props){
        super(props) //继承自别人，第一句为super
        //state,组件的状态，相当于组件的数据。函数组件没有这个东西
        this.state={
            msg:'aaa'
        }
        console.log(this)  //为这个组件对象
    }
    render() { 
        let msg = 'bbb'
        return ( 
            <div>{msg}</div>  //bbb
            <div>{this.props.msg}</div> 
            <div>{this.state.msg}</div> //aaa
        ); 
    } 
}

由于在浏览器中使用Babel来编译jsx效率是较高的。在HTML中使用直接使用react需要引入react、react-dom、babel，在HTML页面使用cdn体验一下react。

导入react

<script src="https://cdn.bootcdn.net/ajax/libs/react/18.0.0-alpha-cb8afda18-20210708/cjs/react-jsx-dev-runtime.development.js"></script>

导入react-dom

<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.0.0-alpha-cb8afda18-20210708/cjs/react-dom-server-legacy.browser.development.js"></script>

导入babel（将es6转为es5）

<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.js"></script>

在HTML中使用react一定要加上这句script！

<script type="text/babel"></script>//表示写在这个script的代码都需要经过Babel转换

完整体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 引入react react-dom babel -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.0.0-alpha-cb8afda18-20210708/cjs/react-jsx-dev-runtime.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.0.0-alpha-cb8afda18-20210708/cjs/react-dom-server-legacy.browser.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.js"></script>
  <!-- babel转换 type="text/babel" -->
  <script type="text/babel">
    
    // 声明组件-函数声明方式
    function MyCom(props){
      // props是父组件给子组件传参存放的位置，是一个对象
      // 变量渲染
      let test = 'test1';
      // 返回的是模板
      return (
        <div>
          <h1>hello{test}</h1>  //使用{}访问变量
          <h2>world{props.stua.name}</h2>  //不可以是{props.stua},会报错，因为对象不能直接在react访问
        </div>
      );
    }

    // 情况一：将组件渲染到容器中
    ReactDOM.render(<MyCom/>,document.getElementById('container'));

    // 情况二：给子组件传参
    let student = {
      name:'zhangsan'
    };
    ReactDOM.render(<MyCom stua={student}/>,document.getElementById('one'));
  </script>
</head>
<body>
  <div id="container"></div>
  <div id="one"></div>
</body>
</html>

语法

一、基本渲染：使用花括号

function mycon(){
    let msg = 'aaa'
    return <div>{msg}<div>
}

二、列表渲染：

fuction mycon(){
    let arr=[1,2,3]
    return(
        <ul>
            //在jsx中使用花括号写的js代码
            { 
               arr.map((item,index)=>return <li key={index}>{item}</li>)
            }
        </ul>
    )
}

三、条件渲染：

fuction mycon(){
    let user=true
    if(user){
        return <div>已登录</div>
    }
}

四、空节点：<React.Fragment></React.Fragment>

使用情况：如代码片段1，在写一个表格时使用<tr>标签，（Columns组件是需要循环遍历生成的很多个<td>。

class Table extends React.Component { 
    render() { 
        return (
            <table><tr><Columns /></tr></table>
        ); 
    } 
}

由于jsx模板的返回值只能有一个根节点，但是在需要生成很多<td>节点时，不可能在外面套一个<div>之类的根节点，如果Columns组件像下面这样写

class Columns extends React.Component { 
    render() { 
        return ( 
            <div> <td>Hello</td> <td>World</td> </div> 
        ); 
    } 
}

这样子最后生成下面的表格代码就会变成这样，代码就无效了！

class Columns extends React.Component { 
    render() { 
        return ( 
            <table>
                <tr>
                    <div>  //会报错，tr下面只能是td
                        <td>Hello</td> 
                        <td>World</td> 
                    </div> 
                </tr>
            </table>
        ); 
    } 
}

所以可以使用<React.Fragment>，可以说是一个不存在的节点，在语法上是一个根节点的存在，但是不对实际的dom进行操作，不增加额外节点。Columns组件改成以下代码可以了。

class Columns extends React.Component { 
    render() { 
        return ( 
            <React.Fragment> <td>Hello</td> <td>World</td> </React.Fragment> 
        ); 
    } 
}