【React笔记一】React入门

本片文章是我自学整理出来的，看的教学视频为b站尚硅谷

React核心

React是一个将数据渲染成视图的js库

原生js的痛点（为什么要学React）

• 原生js操作dom繁琐，效率低
• js直接操作dom，浏览器大量重绘重排
• js没有组件化编码方案，代码复用率低

React特点

• 采用组件化模式，声明式编码，提高开发效率以及组件复用率
• 在React Native中，使用React语法进行移动端开发
• 使用虚拟DOM+优秀的diffing算法，尽量减少与真实DOM交互

关于虚拟DOM

• 本质是object类型的对象
• 虚拟DOM较“轻”，真实DOM较“重”，因为虚拟DOM是React内部使用，无需真实DOM那么多属性
• 虚拟DOM会被React转化为真实DOM，呈现在页面上

jsx语法规则

• 定义虚拟DOM时，不要写引号
• 标签中混入js表达式时用花括号
• 样式的类名用className
• 内联样式用style={{key:value}}
• 只能用一个根标签
• 标签必须闭合
• 标签首字母小写开头转为html标签，标签首字母大写开头;React会去渲染对应组件

js表达式与js语句

1.表达式：一个表达式会产生一个之前，可以放在任何一个需要值的地方

// 1
a
// 2
a+b
// 3
fn()
// 4
arr.map() {}
// 5
function fn() {}

2.js语句
例子：

// 1
if() {}
// 2
for() {}
// 3
switch() { case:xxx }