React基础 - 简介及基本使用

「已注销」

已于 2022-07-04 16:28:25 修改

阅读量133

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-03-11 09:47:39 首次发布

本文链接：https://blog.csdn.net/qq_39264561/article/details/123416886

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了React的基本概念和使用，包括声明式编码、组件化以及React Native。重点讲解了React的高效原因——虚拟DOM和DOMDiffing算法，以及如何创建和渲染虚拟DOM。同时，文章通过示例展示了JSX语法的运用，包括函数式组件和类式组件的创建与渲染流程。

摘要由CSDN通过智能技术生成

简介

官网

中文官网

英文官网

特点

声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）

react高效的原因

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。

基本使用

创建虚拟DOM的两种方式

纯JS方式(一般不用)

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
</body>

<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<script type="text/javascript">
    // 创建虚拟DOM
    const VDOM = React.createElement('h1', { id: 'title' }, 'Hello，React');
	// 渲染虚拟DOM到页面
	ReactDOM.render(VDOM, document.getElementById('test'));
</script>

JSX方式

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
</body>

<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
    // 创建虚拟DOM
    const VDOM = (
        <h1 id='title'>
        <span>Hello，React</span>
        </h1>
    );
	// 渲染虚拟DOM到页面
	ReactDOM.render(VDOM, document.getElementById('test'));
</script>

JSX语法规则

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>helloReact</title>
        <style>
            .title{
                width: 500px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="test"></div>
    </body>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        const myID = 'jAVaScript';
        const myData = 'HeLlO，react';
        // 创建虚拟DOM
        const VDOM = (
            <h1 className='title' id={myID.toLocaleUpperCase()}>
                <span>{myData.toLocaleLowerCase()}</span>
            </h1>
        );
        // 渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>
</html>

定义虚拟DOM时，不要写引号
标签中混入JS表达式时要用{}
样式的类名指定不要用class，要用className
内联样式，要用style={{key:value}}的形式去写
只有一个根标签
标签必须闭合
标签首字母
- 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
- 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

函数式组件

<script type="text/babel">
    function MyComponent() {
    	return <h1>函数式组件</h1>;
	}
	// 渲染虚拟DOM到页面
	ReactDOM.render(<MyComponent/>, document.getElementById('test'));
</script>

问题：执行了ReactDOM.render(<MyComponent/>,document.getElementById('test'))之后，发生了什么？

React解析组件标签，找到了MyComponent组件
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中

类式组件

<script type="text/babel">
    // 创建类组件
    class MyComponent extends React.Component {
        render() {
            return <h1>类式组件</h1>;
        }
    }
	// 渲染类组件
	ReactDOM.render(<MyComponent />, document.getElementById('test'));
</script>