React简介

Han_Zhou_Z

已于 2022-03-06 14:37:10 修改

阅读量1.4k

点赞数 2

文章标签： react.js javascript 前端

于 2022-03-06 14:36:58 首次发布

本文链接：https://blog.csdn.net/han_zhou_z/article/details/123307344

版权

一、React概述

二、ReactDOM.render()方法的语法格式

三、React开发环境的搭建

四、React的渲染机制

一、React概述

1、是一个JavaScript库，旨在简化可视化界面的开发

2、基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写

3、React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻辑进行封装

二、ReactDOM.render()方法的语法格式

1、ReactDOM.render(element,container[,callback])

2、element参数：必须，表示渲染的源对象(元素或组件)

3、container参数：必须，表示渲染的目标对象(元素或组件)

4、callback参数：可选，用于定义回调函数

三、React开发环境的搭建

1、基本应用(传统应用)：在页面文件中导入React的核心库(.js文件)

（1）核心库：react.development.js

（2）与DOM相关的库：react-dom.development.js

（3）babel编译器库：将ES6转换成ES5

（4）创建react虚拟DOM

 <script type="text/babel">
		ReactDOM.render(
			<h1>Hello World</h1>,
			document.getElementById('example')
	)
</script>

<!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>传统的DOM</title>
</head>
<body>
    <div id="app"></div>
    
    <script type="text/javascript">
         //获取页面中的div
         let div = document.getElementById('app');
         //创建span标签
         let span = document.createElement('span');
         //创建h3标签
         let h3 = document.createElement('h3');
         h3.innerHTML = '虎虎生威'
         //创建p标签
         let p = document.createElement('p');
         p.innerHTML = '新年快乐!'
         //将h3、p添加到span中
         span.appendChild(h3);
         span.appendChild(p);
         //将span添加到div中
         div.appendChild(span)
    </script>
</body>
</html>

① ReactDOM对象：是React的虚拟DOM对象,内置对象

<!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>ReactDOM</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="react-div"></div>
    <script type="text/babel">
        let reactDiv = document.getElementById('react-div');
        //创建虚拟的DOM元素
        const reactH3 = React.createElement('h3',{},'虎虎生威');
        const reactP = React.createElement('p',{},'新年快乐');
        const reactSpan = React.createElement('spn',{},reactH3,reactP);
        //将span渲染到div中
        ReactDOM.render(reactSpan,reactDiv)
    </script>
</body>
</html>

② render函数：渲染函数,将react的虚拟DOM元素渲染到页面

2、脚手架开发：搭建React项目,根据不同的需求开发组件

（1）create-react-app：属于FacdBook,快速的、不做任何配置的构建React开发环境

npm install -g create-react-app

（2）create-react-app构建的react开发环境是基于webpack+ES6