1.为什么使用React？
- 原生JS操作DOM繁琐，效率低(DOM-Api操作UI)
- 浏览器进行大量的重绘重排(性能消耗)
- JS没有组件化方案，复用率低
2.React的特点
- 采用组件化编码，声明式编码，提高开发效率及组件复用率。
- 在React Native中可以使用React语法进行移动端开发。
- 使用虚拟DOM+Diffing算法，尽量减少与真实DOM的交互。
3.关于虚拟DOM
- 本质是Object类型的对象(一般对象)
- 虚拟DOM “轻”(属性少)，真实DOM “重”，虚拟DOM只有React内部使用，不需要像真实DOM这么多属性。
- 虚拟DOM最终会被React转化成真实DOM，呈现页面。
4.babel的作用
- Es6转Es5
- JSX转JS
5.jsx语法规则
- 定义虚拟DOM时，不能用引号
- 标签中混入js表达式时要使用
{} - 样式名称要使用
className - 内联样式，要使用
style={{color: "red",fontSize: "20px"}}的形式 - 只有一个根标签
- 标签必须闭合
- 标签首字母 1.若小写字母开头，则将标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。2.若大写，则渲染默认组件，如果组件未定义则报错。
<!-- 1.创建虚拟DOM -->
<script type="text/babel">
const VDOM = (
<div>
<h1 style={{color: "red",fontSize: "20px"}}>
hello
<span className="title">语法规则信息</span>
</h1>
</div>
);
// {/* // 渲染虚拟DOM到页面展示 /* */}
ReactDOM.render(VDOM, document.getElementById("test"));
6.区分语句和表达式
1.表达式：一个表达式会产生值，可以放在任意一个需要值的地方 下面这些都是表达式
- a
- a+b
- demo(1)
- arr.map() function text() 2.语句(代码)
- if
- for
- switch(){ case: xxxx }
7.创建函数组件
function DemoComponents(){
/* console.log(this) undfined 组件里面的this开启了严格模式 默认this不指向window */
return (
<div>
<h1>这是函数组件</h1>
</div>
)
};
//渲染页面到组件
ReactDOM.render(<DemoComponents/>,document.getElementById("test"))
tips：
-
组件里面的this开启了严格模式 默认this不指向window
-
ReactDOM.render( ... )之后发生了什么？
-
React 解析组件标签，找到了myComponent组件，
-
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真是DOM，随后呈现在页面上
