React概念，开发环境搭建与基础语法

川长思鸟来 2021-07-25 02:07 445阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]

# 1. 初识React #

## 1. 什么是 React ? ##

1.  React 起源于 Facebook
2.  React 是一个用于构建用户界面的 javascript 库。
3.  React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

## 2. React 开发背景 ##

Facebook 需要解决的问题：构建数据不断变化的大型应用。（数据变化会造成以下两点的问题，React的解决方案是什么呢）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1]

## 3. 虚拟Dom—快减少更新次数 减少更新区域 ##

**虚拟dom相当于在js和真实dom中间加了一个缓存。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都首先重新构建整个DOM树（减少页面更新次数），然后React将当前整个DOM树和上一次的DOM树进行对比(DOM Diff算法-最小化页面重绘)，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。**

## 4. React 特点 ##

1.  声明式设计 −React采用声明范式，可以轻松描述应用。（开发者只需要声明显示内容，react就会自动完成）
2.  高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互
3.  灵活 −React可以与已知的库或框架很好地配合。
4.  组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。（把页面的功能拆分成小模块–每个小模块就是组件）
5.  单向数据流–　React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点

## 5. React 组件特性 ##

1.  React的核心就是组件：组件的设计目的是提高代码复用率，降低测试难度和代码的复杂程度。
2.  ==提高代码复用率：==组件将数据和逻辑进行封装。
3.  ==降低测试难度：==组件高内聚低耦合（各个元素高集成度低关联性），很容易对单个组件进行测试。
4.  ==代码的复杂程度：==直观的语法，可以极大提高可读性。

## 6. 组件化编程思想 ##

1.  所谓组件，即封装起来的具有独立功能的UI部件。
2.  React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。
3.  Facebook的instagram.com整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大量其它组件
4.  灵活的组件化设计思想，可以让你的页面功能更具复用性。同时低耦合度的组件可以让功能之间的影响降到最低！

## 7.React 浏览器兼容性 ##

1.  除去ie8以下版本，其余浏览器都可以很好的支持

# 2. 开发环境搭建 #

## 1. React开发环境搭建 ##

1.  页面插入reactjs文件  
    **react.js文件是创建React元素和组件的核心文件，react-dom.js文件用来把React组件渲染为DOM，此文件依赖于react.js文件，需在其后被引入。Babel的主要用途是将 JSX 语法转换新标准的JavaScript代码让现今浏览器兼容的代码**

## 2. 根DOM节点 ##

1.  页面中需要有一个div容器，容器中的内容都会被React Dom所管理。
2.  这个容器叫做根DOM节点
3.  注意：通常React 开发应用时一般只会定义一个根节点。

*观察这个变量*

let newhtml=<div>你好么么哒 </div>

这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML。

## 3. JSX ##

1.  JSX=javascript xml就是Javascript和XML结合的一种格式。是JavaScript 的语法扩展。 React推荐在 React 中使用 JSX 来描述用户界面。当遇到<，JSX就当HTML解析，遇到\{就当JavaScript解析。
2.  我们不需要一定使用 JSX，但它有以下优点：
    
     *  JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
     *  它是类型安全的，在编译过程中就能发现错误。
     *  使用 JSX 编写模板更加简单快速。

## 开发环境搭建 ##

**编写React渲染组件ReactDOM.render()**  
**ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入页面指定的根DOM 节点。**

// 使用react渲染到页面中
    ReactDOM.render(newhtml,document.getElementById("demodiv"));

*注意*  
**Jsx中的HTML标签必须按照w3c规范来写 标签必须闭合**

## 4. 还可以这么写注释? ##

注释/\* 内容\*/ html标签内注释｛/\* 最外层有花括号\*/｝

// 1.创建显示的内容模板（jsx来进行创建）
    let newhtml=<div>
                    你好么么哒
                    {/*jsx中进行注释必须使用花括号包裹js的注释语法*/} 
                    </div>
    // 使用react渲染到页面中
    ReactDOM.render(newhtml,document.getElementById("demodiv"));

## 5. 多行HTML ##

1.  先挖坑

let newhtml=
            <div>多行html内容外层必须要有一个父元素进行包裹否则会报错 </div>
            <div>建议大家在jsx中如果写内容的话尽量用一个圆括号进行包裹</div>
            <div>你好么么哒 3</div>
    // 使用react渲染到页面中
    ReactDOM.render(newhtml,document.getElementById("demodiv"));

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 2]  
**使用圆括号包裹养成好习惯**

<script type="text/babel">
        // 1.创建显示的内容模板（jsx来进行创建）
        let newhtml=(
                // <div>
                            <div>多行html内容外层必须要有一个父元素进行包裹否则会报错 </div>
                            <div>建议大家在jsx中如果写内容的话尽量用一个圆括号进行包裹</div>
                            <div>你好么么哒 3</div>
                // </div>
                )
        // 使用react渲染到页面中
        ReactDOM.render(newhtml,document.getElementById("demodiv"));
    </script>

## 6. JSX中使用模板语法 ##

**可以任意地在 JSX 当中使用 JavaScript表达式，在 JSX 当中的表达式要包含在大括号里。**

## 7. 属性赋值 ##

**Jsx中也可以使用大括号来定义以 JavaScript 表达式为值的属性：**

**切记使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。**

## 8. 定义样式 : ##

1.  定义样式对象, 以style属性引用
2.  样式名以驼峰命名法表示, 如text-align需写成textAlign
3.  默认像素单位是 px

# 3. 扩展 #

## 1. 模块与模块化 ##

1.  模块：向外提供特定功能的js文件，提高js的复用率简化编写提高循行效率
2.  模块化：当应用的js都是用js模块编写的，这个应用就是模块化应用

## 2. 组件与组件化 ##

1.  组件：用来实现页面局部功能效果的代码合集（html/css/js）简化复杂页面的编码，提高运行效率
2.  组件化：当应用多使用组件的方式来完成，这个应用就是一个组件化应用

# 4. 面向组件编程 #

1.  概念  
    **组件是React中非常重要的概念–可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。**
2.  函数组件  
    **组件 首字母大写 首字母大写 首字母大写并且其后每个字母首字母大写**

1.  复合组件  
    **通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。**

<div id="demodiv"></div>
    <script type="text/babel">
        // 1.定义组件（子组件）
        function ErZiA(){
            return (
                <div>我是子组件1</div>
            )
        }
        function ErZiB(){
            return (
                <div>我是子组件2</div>
            )
        }
        // 2.定义组件（父组件）
        function Fu(){
            return (
                <div>
                    <ErZiA/>
                    <ErZiB/>
                    <ErZiA/>
                    <ErZiB/>
                    <ErZiA/>
                    <ErZiB/>
                    <ErZiA/>
                    <ErZiB/>
                    <ErZiA/>
                    <ErZiB/>
                    <ErZiA/>
                    <ErZiB/>
                    <ErZiA/>
                    <ErZiB/>
                </div>
            )
        }
        // 3.render渲染
        ReactDOM.render(<Fu/>,document.getElementById("demodiv"))
    
    </script>

1.  ES6 class类组件

<div id="demodiv"></div>
    <script type="text/babel">
    // 1.定义类组件
    class MyCom extends React.Component{
        render(){
            return (
                <div>
                    我是class组件    
                </div>
            )
        }
    }
    ReactDOM.render(<MyCom/>,document.getElementById("demodiv"));
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]: /images/20210724/92db41ac61774effb51d9cc8511f3937.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1]: /images/20210724/8a2495bbeac640b9a9f181c6d4ca27b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 2]: /images/20210724/181d1228c78244daac8a12854cf2ee3e.png