react入门基础

最新推荐文章于 2025-05-12 14:43:13 发布

过分安静

最新推荐文章于 2025-05-12 14:43:13 发布

阅读量205

点赞数

文章标签： react.js javascript

本文链接：https://blog.youkuaiyun.com/qq_28262385/article/details/130779994

版权

本文介绍了React的基础知识，包括如何使用React.createElement()创建元素，如何将多个元素包裹在容器元素中，以及如何过渡到组件式开发。通过实例展示了从纯JS创建元素到使用JSX简化代码的过程，强调了组件化开发的优势。

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

关于react

关于react的简介。
我们主要来看下怎么应用:
如果我们要在一个id为root的div标签中新建一个p标签，文本内容为hello react。正常是这个样子的

<div id="root">
	<p>hello react</p>
</div>

使用react是这个样子的

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入reactjs库-->
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <title>Document</title>
    </head>
    <body>

        <div id="root">
        </div>

        <script type="text/javascript">
            // 创建一个react元素p1。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本
            const p1 = React.createElement('p', null, 'hello react');
            // 使用原始js获取到id为root的div标签
            const root = document.getElementById("root");
            // 使用ReactDOM.render()方法，将其渲染到id为root的DOM 节点上
            ReactDOM.render(p1, root);
        </script>
    </body>
</html>

1、首页我们要先引入react的js库
2、使用React.createElement()方法创建p标签
3、使用原生方法document.getElementById()，获取到id为root的div标签
4、通过ReactDOM.render()方法渲染p1元素到真实DOM中

单个标签就好写这么多……那多个标签呢
正常是这个样子的

<div id="root">
	<p>hello react</p>
	<p>hello react</p>
	<p>hello react</p>
	<p>hello react</p>
	<p>hello react</p>
</div>

有几个我们复制几个就好了。
在来看看react中是怎么写的，需要注意的是，由于ReactDOM.render()只使用一个元素作为参数，当需要渲染两个同级别元素，会出现问题。这个情况下，我们就需要将同级别元素包裹在一个html标签中，比如：<div>或是<span>

示例如下：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入reactjs库-->
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <title>Document</title>
    </head>
    <body>

        <div id="root">
        </div>

        <script type="text/javascript">
            // 创建一个react元素p1。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本
            const p1 = React.createElement('p', null, 'hello react');
            // 使用原始js获取到id为root的div标签
            const root = document.getElementById("root");
            // 创建一个div标签用于包裹p1元素，同时也是ReactDOM.render()方法需要传递的第一个参数
            const div1 = React.createElement('div', null, p1, p1);
            // 使用ReactDOM.render()方法，将其渲染到id为root的DOM 节点上
            ReactDOM.render(div1, root);
        </script>
    </body>
</html>

和上面对比不难发现，我们多创建了一个div1用来包裹p1，同时也是ReactDOM.render()方法需要传递的第一个参数，其中div1中的p1后面还是可以有很多标签的例如

<script type="text/javascript">
            // 创建一个react元素p1。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本
            const p1 = React.createElement('p', null, 'hello react');
            const div2 = React.createElement('div', null, 'hello world');
            // 使用原始js获取到id为root的div标签
            const root = document.getElementById("root");
            const div1 = React.createElement('div', null, p1, p1, div2);
            // 使用ReactDOM.render()方法，将其渲染到id为root的DOM 节点上
            ReactDOM.render(div1, root);
        </script>

我们又创建了一个div2的react元素，它是一个div标签，没有需要传递的数据(null)，文本内容是’hello world’。

接下来我们来看下从上面怎么过渡到组件式开发,由于官方推荐使用函数式组件开发方式，接下来我们都使用函数式组件进行讲解，
我们把上面的p1变成函数式组件，是这个样子的

<script type="text/javascript">
	// 上面例子中的p1，react元素
	const p1 = React.createElement('p', null, 'hello react');
	// p1函数式组件写法
	function P1(props) {
		return React.createElement('p', null, 'hello react')
    }
</script>

上面的例子改写成为


<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入reactjs库-->
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <title>Document</title>
    </head>
    <body>

        <div id="root">
        </div>

        <script type="text/javascript">
            // 创建一个react元素p1。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本
            // const p1 = React.createElement('p', null, 'hello react');

            // p1函数式组件写法
            function P1(props) {
                return React.createElement('p', null, 'hello react')
            }

            const div2 = React.createElement('div', null, 'hello world');

            // 使用原始js获取到id为root的div标签
            const root = document.getElementById("root");

            const div1 = React.createElement(
                'div',
                null,
                React.createElement(P1),
                React.createElement(P1),
                div2
            );

            // 使用ReactDOM.render()方法，将其渲染到id为root的DOM 节点上
            ReactDOM.render(div1, root);


        </script>
    </body>
</html>

把p1改写成函数式组件后，ReactDOM.render()方法渲染的div1中的p1改成成了React.createElement(P1),不在是之前的p1。在函数式组件P1中我们发现有个参数props。它是用来接收父组件传递过来的属性的。我们在div1中给P1传递几个参数。那么在P1组件中就可以接收并且渲染它们。示例如下：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入reactjs库-->
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <title>Document</title>
    </head>
    <body>

        <div id="root">
        </div>

        <script type="text/javascript">
            // 创建一个react元素p1。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本
            // const p1 = React.createElement('p', null, 'hello react');

            // p1函数式组件写法
            function P1(props) {
                return React.createElement('p', null, 'hello ' + props.id + " world!!!")
            }

            const div2 = React.createElement('div', null, 'hello world');

            // 使用原始js获取到id为root的div标签
            const root = document.getElementById("root");

            const div1 = React.createElement(
                'div',
                null,
                React.createElement(P1, {id: 'vue', frameworkName: 'vuejs', title: 'vuejs框架'}),
                React.createElement(P1, {id: 'angular', frameworkName: 'angularjs', title: 'angularjs框架'}),
                React.createElement(P1, {id: 'react', frameworkName: 'reactjs', title: 'reactjs框架'}),
                div2
            );

            // 使用ReactDOM.render()方法，将其渲染到id为root的DOM 节点上
            ReactDOM.render(div1, root);


        </script>
    </body>
</html>

在div1中调用P1组件的时候我们传入了3个参数。并且在P1组件通过props成功获取了它们的值。

通过上面的例子我们不难发现。如果这个样子使用react很麻烦，并且很容易出错。幸运的是有了JSX。它是js的一种扩展，为了函数调用和对象构造提供了语法糖，特别是React.createElement()。JSX生成React元素，同时允许你充分利用js的全部功能。需要注意的是使用引入方式的时候，创建的jsx文件最好以jsx为后缀名。避免不必要的麻烦，如果你的编辑器没有配置好jsx。在js文件中使用jsx会报错。
上面的例子就可以改写成如下样式：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入reactjs库-->
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
        <title>Document</title>
    </head>
    <body>

        <div id="root">
        </div>

        <script type="text/babel">
            // 创建一个react元素p1。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本
            // const p1 = React.createElement('p', null, 'hello react');

            // p1函数式组件写法
            function P1(props) {
                return (
                    <p>hello {props.id} world!</p>
                )
            }

            const div2 = React.createElement('div', null, 'hello world');

            // 使用原始js获取到id为root的div标签
            const root = document.getElementById("root");

            const div1 = React.createElement(
                'div',
                null,
                React.createElement(P1, {id: 'vue', frameworkName: 'vuejs', title: 'vuejs框架'}),
                React.createElement(P1, {id: 'angular', frameworkName: 'angularjs', title: 'angularjs框架'}),
                React.createElement(P1, {id: 'react', frameworkName: 'reactjs', title: 'reactjs框架'}),
                div2
            );

            // 使用ReactDOM.render()方法，将其渲染到id为root的DOM 节点上
            ReactDOM.render(div1, root);


        </script>
    </body>
</html>

由于用到了jsx。我们需要导入babe以及把script标签中的type="text/javascript"改成type=“text/babel”。对比不难发现其实就是把React.createElement()换成了我们最熟悉的html

我们把div1也改成组件的形式，示例如下：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入reactjs库-->
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
        <title>Document</title>
    </head>
    <body>

        <div id="root">
        </div>

        <script type="text/babel">
            // 创建一个react元素p1。其中'p'代表的是html中的p标签，null位置是需要传递的数据，'hello react'是p标签中文本
            // const p1 = React.createElement('p', null, 'hello react');
            
            // const div2 = React.createElement('div', null, 'hello world');

            // const div1 = React.createElement(
            //     'div',
            //     null,
            //     React.createElement(P1, {id: 'vue', frameworkName: 'vuejs', title: 'vuejs框架'}),
            //     React.createElement(P1, {id: 'angular', frameworkName: 'angularjs', title: 'angularjs框架'}),
            //     React.createElement(P1, {id: 'react', frameworkName: 'reactjs', title: 'reactjs框架'}),
            //     div2
            // );
            
            // p1函数式组件
            function P1(props) {
                return (
                    <p>hello {props.id} world!</p>
                )
            }
            
			// div1函数式组件
            function Div1(props) {
                return (
                    <div>
                        <P1 id="vue" frameworkName="vuejs" title="vuejs框架"/>
                        <P1 id="angular" frameworkName="angularjs" title="angularjs框架"/>
                        <P1 id="react" frameworkName="reactjs" title="reactjs框架"/>
                        <div>hello world</div>
                    </div>
                )
            }

            // 使用原始js获取到id为root的div标签
            const root = document.getElementById("root");

            // 使用ReactDOM.render()方法，将其渲染到id为root的DOM 节点上
            ReactDOM.render(React.createElement('div', null, <Div1/>), root);


        </script>
    </body>
</html>