React快速入门-基础导入（1）

叁歲伎倆 2023-10-12 13:43 17阅读 0赞

# 1.JSX语法 #

JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。  
JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。  
使用JSX语法，需要2点注意：

1.  所有的html标签必须是闭合的，如：hello world  
    ，写成这样是不可以的：  
    hello world
2.  在JSX语法中，只能有一个根标签，不能有多个。

const div1 = <div>hello world</div> //正确
    const div2 = <div>hello</div> <div>world</div> //错误

在JSX语法中，如果想要在html标签中插入js脚本，需要通过\{\}插入js脚本。  
![在这里插入图片描述][9e867384f1834a8091ac9bc7db031357.png]

# 2.组件 #

组件是React中最重要也是最核心的概念，一个网页，可以被拆分成一个个的组件

index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    
    class HelloWorld extends React.Component {
         //第二步，编写类并且继承 React.Component
        render(){
         //第三步，重写render()方法，用于渲染页面
            return <div>hello world!</div> //JSX语法
        }
    }
    ReactDOM.render(
        <HelloWorld />,
        document.getElementById('example')
    );

在上面的代码中，我们使用了`React`和`ReactDOM`库来创建一个简单的React组件并将其渲染到HTML页面中。

*  首先，我们导入React和ReactDOM库。
 *  然后，我们定义了一个名为`HelloWorld`的类，该类继承自`React.Component`。这是`创建React组件的基本步骤之一`。
 *  在HelloWorld类中，我们重写了`render()方法`。`render()方法`是必需的，它定义了组件的输出内容。在这个例子中，我们返回了一个使用JSX语法编写的`<div>hello world!</div>`元素。
 *  最后，我们使用`ReactDOM.render()`函数将`HelloWorld组件渲染到HTML页面中的一个具有id属性为"example"的元素中`。

> 请注意，这段代码只是一个简单的示例，假设你已经在项目中正确配置了React和ReactDOM，并且有一个具有id为"example"的HTML元素供渲染使用。你可能还需要在你的项目中`导入和配置Babel或Webpack`等工具来正确编译和运行JSX语法。

![在这里插入图片描述][9c20fa4add414b709ce7ba807dcf9a12.png]

# 3.导入自定义组件 #

**index.js**

创建**show.js**文件，用于测试导入组件：

import React from 'react';
    import Hello from './index'
    
    class Show extends React.Component{
        
        render(){
        
            return <Hello/>; //使用Hello组件
        }
    }
    ReactDOM.render(
        <Show />,
        document.getElementById('example')
    );

![在这里插入图片描述][33892daa18e144409fe5084ed2c8a4f4.png]

# 4.组件参数 #

组件是可以传递参数的，`有2种方式传递`，分别是`属性`和`标签包裹的内容传递`，具体使用如下：

import React from 'react';
    import Hello from './index'
    
    class Show extends React.Component{
        
        render(){
        
            return <Hello name = "Amy">10age</Hello>; //使用Hello组件
        }
    }
    ReactDOM.render(
        <Show />,
        document.getElementById('example')
    );

其中，`name="Amy"就是属性传递`，`10就是标签包裹的内容传递`。  
`那么，在index.js组件中如何接收参数呢？`  
对应的也是2种方法：  
`属性：` `this.props.name`接收；  
`标签内容：` `this.props.children` 接收；  
**index.js**

import React from 'react';
    import ReactDOM from 'react-dom';
    
    class HelloWorld extends React.Component {
         //第二步，编写类并且继承 React.Component
        render(){
         //第三步，重写render()方法，用于渲染页面
            return <div>hello world! name={
        this.props.name},age={
        this.props.age}</div> //JSX语法
        }
    }
    ReactDOM.render(
        <HelloWorld />,
        document.getElementById('example')
    );

**show.js**

import React from 'react';
    import HelloWorld from './index'
    
    class Show extends React.Component{
        
        render(){
        
            return <HelloWorld name = {
        "Amy"} age={
        10}>10age</HelloWorld>; //使用HelloWorld组件
        }
    }
    ReactDOM.render(
        <Show />,
        document.getElementById('example')
    );

# 5.组件的状态 #

每一个组件都有一个状态，其保存在`this.state`中，当状态值发生变化时，`React框架会自动调用render()方法`，重新渲染页面。  
其中，要注意两点：  
一：`this.state值的设置要在构造参数中完成`；  
二：`要修改this.state的值，需要调用this.setState()完成`，不能直接对this.state进行修改；  
![在这里插入图片描述][3f94ff012f064730ad74ef70d3dfbd2b.png]  
![7afc76f918064caea382445c9231f07d.png][]

# 6. 生命周期 #

组件的运行过程中，存在不同的阶段。React 为这些阶段提供了`钩子方法`，允许开发者自定义每个阶段自动执行的  
函数。这些方法统称为`生命周期方法（lifecycle methods）`。  
![在这里插入图片描述][9471ae8f09574ad69df999a9bf341898.png]  
![在这里插入图片描述][c5dfaf02aaf542628eeea8233bf3d036.png]

[9e867384f1834a8091ac9bc7db031357.png]: https://img-blog.csdnimg.cn/9e867384f1834a8091ac9bc7db031357.png
[9c20fa4add414b709ce7ba807dcf9a12.png]: https://img-blog.csdnimg.cn/9c20fa4add414b709ce7ba807dcf9a12.png
[33892daa18e144409fe5084ed2c8a4f4.png]: https://img-blog.csdnimg.cn/33892daa18e144409fe5084ed2c8a4f4.png
[3f94ff012f064730ad74ef70d3dfbd2b.png]: https://img-blog.csdnimg.cn/3f94ff012f064730ad74ef70d3dfbd2b.png
[7afc76f918064caea382445c9231f07d.png]: https://img-blog.csdnimg.cn/7afc76f918064caea382445c9231f07d.png
[9471ae8f09574ad69df999a9bf341898.png]: https://img-blog.csdnimg.cn/9471ae8f09574ad69df999a9bf341898.png
[c5dfaf02aaf542628eeea8233bf3d036.png]: https://img-blog.csdnimg.cn/c5dfaf02aaf542628eeea8233bf3d036.png