React概念，开发环境搭建与基础语法_react 判断开发环境-CSDN博客

本文链接：https://blog.csdn.net/qq_39200185/article/details/100664551

在这里插入图片描述

1. 初识React

1. 什么是 React ?

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

2. React 开发背景

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

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

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

4. React 特点

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

5. React 组件特性

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

6. 组件化编程思想

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

7.React 浏览器兼容性

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

2. 开发环境搭建

1. React开发环境搭建

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

<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/babel.min.js"></script>

2. 根DOM节点

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

<div id="demodiv">

</div>

观察这个变量

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

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

3. JSX

JSX=javascript xml就是Javascript和XML结合的一种格式。是JavaScript 的语法扩展。 React推荐在 React 中使用 JSX 来描述用户界面。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
我们不需要一定使用 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

先挖坑

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

在这里插入图片描述
使用圆括号包裹养成好习惯

<!-- script标签中必须要有type 类型的属性 -->
<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 当中的表达式要包含在大括号里。

<script type="text/babel">
        // 1.插入变量
    let uname="小明";
    // 2.插入对象
    let obj={
        name:"xixi",age:18
    }
    // 3.插入函数
    function showname(){
        return "我是函数的数据"
    }
    // 4.使用复杂函数
    function fun(text){
        return text.name;
    }
    let text={
        name:"我是名字"
    }
    // 5.进行运算
    var i=9;
    let k=10;
    // 6.三元运算符
    let bool=false;


    let newHtml=(
        
        <div>
            <h1>{uname}</h1>
            <p>{obj.name}-----------{obj.age}</p>
            <p>{showname()}</p>
            <p>{fun(text)}</p>
            <p>{i*k}</p>
            <p>{bool?"你好":"你坏"}</p>
        </div>
    )
    ReactDOM.render(newHtml,document.getElementById("demodiv"))
</script>

7. 属性赋值

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

<img src={user. Url} />

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

8. 定义样式 :

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

3. 扩展

1. 模块与模块化

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

2. 组件与组件化

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

4. 面向组件编程

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

<script type="text/babel">
    // 1.声明组件内容（使用大驼峰命名法）
    function MyCom(){
        return (
            <div>
                <h1>title</h1>
                <p>我是内容</p>    
            </div>
        )
    }
    // 2.调用组件
    let element=<MyCom/>
    // 3.使用render渲染
    ReactDOM.render(element,document.getElementById("demodiv"));

</script>

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

<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>

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>