这是我参与「第五届青训营」伴学笔记创作活动的第6天

React简介 1.1、概念它是一个将数据渲染为HTML视图的js库

1.2、原生js痛点用dom的API去操作dom，繁琐且效率低用js直接操作dom，浏览器会进行大量的回流和重绘原生js没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点采用组件化模式，声明式编码，提高开发效率和组件复用性在React Native中可以用react预发进行安卓、ios移动端开发使用虚拟dom和有些的diffing算法，尽量减少与真实dom的交互，提高性能

React入门

React 基础案例

1.先倒入三个包：

【先引入react.development.js，后引入react-dom.development.js】

react.development.js
react-dom.development.js
babel.min.js

2.创建一个容器

3.创建虚拟DOM，渲染到容器中

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

    </div>
</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<!-- 引入react核心库-->
<script src="../js/react.development.js" type="text/javascript"></script>
<!-- 引入react-dom，用于支持react操作DOM-->
<script src="../js/react-dom.development.js" type="text/javascript"></script>
<!-- 引入babel，用于将js转为js-->
<script src="../js/babel.min.js" type="text/javascript"></script>

<!--这里使用了babel用来解析jsx语法-->
<script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = <h1>Hello</h1>  //这个地方使用的是JSX语法，不需要加""
        // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
        ReactDOM.render(VDOM,document.getElementById("test"));        
</script>
</html>

这样，就会在页面中的这个div容器上添加这个h1.

JSX基础语法

两种创建虚拟DOM的方法 1.使用JSX创建虚拟DOM

const VDOM = (
            <h1 id = {MyId.toLocaleUpperCase()}>
                <span className = "sss" style = {{fontSize:'50px'}}>sss</span>
            </h1>
        )

这个在上面的案例中已经演示过了，下面看看另外一种创建虚拟DOM的方式

2.使用JS创建虚拟DOM

// 1.创建虚拟DOM[在这使用了js的语法]React.createElement(标签,标签属性,内容)
const VDOM = React.createElement('h1',{id:"title"},"nihao")

使用JS和JSX都可以创建虚拟DOM，但是可以看出JS创建虚拟DOM比较繁琐，尤其是标签如果很多的情况下，所以还是比较推荐使用JSX来创建。

jsx语法规则定义虚拟DOM，不能使用“”

标签中混入JS表达式的时候使用{}

样式的类名指定不要使用class，使用className

内敛样式要使用双大括号包裹

不能有多个根标签，只能有一个跟标签

标签必须闭合

如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错；如果是大写字母开头，react就去渲染对应的组件，如果没有就报错

模块与组件、模块化与组件化的理解模块理解：向外提供特定功能的js程序, 一般就是一个js文件为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。作用：复用js, 简化js的编写, 提高js运行效率组件理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 为什么要用组件：一个界面的功能更复杂作用：复用编码, 简化项目编码, 提高运行效率模块化当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

青训营React的学习笔记

React入门

React 基础案例

JSX基础语法

2.使用JS创建虚拟DOM