基础案例
1.先倒入三个包：
【先引入react.development.js，后引入react-dom.development.js】
react.development.js（react的核心库） react-dom.development.js（周边库：用于支持react操作DOM） babel.min.js （用于将jsx转为js）
2.创建一个容器
3.创建虚拟DOM，渲染到容器中
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../js/react.development.js" type="text/javascript"></script>
<script src="../js/react-dom.development.js" type="text/javascript"></script>
<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>
使用jsx和js创建虚拟DOM的区别：
js：const VDOM = React.createElement('h1',{id:'title'},'hello')
jsx： const VDOM = <h1 id="title"><span>Hello react</span></h1>
虚拟DOM与真实DOM：
关于虚拟DOM:
1.本质是object类型的对象(一般对象)
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
jsx语法规则：
1.定义虚拟DOM时，不要写引号
2.标签中混入JS表达式时要用{ }
3.样式的类名指定不要用class，要用className
4.内联样式，要用style={{key：value}}的形式去写
5.只有一个根标签
6.标签必须闭合
7.标签首字母 <good>/<Good>
（1）若小写字母开头，则将改标签转为html中同名元素
若html中无该标签对应的同名元素，则报错。
（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
区分:js语句与js表达式:
1.表达式:一个表达式会产生一个值,可放在任何一个需要值的地方
(1) a
(2) a+b
(3) demo(1)
(4) arr.map()
(5) function test (){ }
2.语句(代码):
(1) if()
(2) for(){}
(3) switch(){case:xxxx}
模块与组件、模块化与组件化的理解
模块
- 理解:向外提供特定功能的js 程序,一般就是一个js 文件
- 为什么要拆成模块:随着业务逻辑增加，代码越来越多且复杂。
- 作用:复用js,简化js的编写,提高js运行效率
组件
- 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image 等等)
- 为什么:一个界面的功能更复杂
- 作用: 复用编码,简化项目编码,提高运行效率
模块化
当应用的 is 都以模块来编写的,这个应用就是一个模块化的应用
组件化
当应用是以多组件的方式实现,这个应用就是一个组件化的应用
扫一扫
2686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
