React入门（一）｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 7 天这篇笔记记录了React入

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

这篇笔记记录了React入门的一些基础知识

一、本堂课重点内容

为什么学习React
React特点
React基础语法

二、详细知识点介绍

1、为什么学习React

原生JS操作DOM繁琐，效率低
使用JS直接操作DOM,浏览器会进行大量的重绘重排
原生JS没有组件化编码方案，代码复用低

2、React特点

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

3、React基础语法

创建一个基本的应用

<script type="text/babel">
    const VDOM = <h1>Hello,React</h1>;
    ReactDOM.render(VDOM,document.querySelector(".test"));
</script>

为什么使用JSX？假如有一个需求，在一个id为test的div标签内创建一个span标签

使用js创建虚拟DOM（很麻烦）

//1.创建虚拟DOM,创建嵌套格式的dom
const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

使用JSX创建虚拟DOM

//1.创建虚拟DOM
const VDOM = (
    <h1 id="title">
        <span>Hello,React</span>
    </h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

关于虚拟DOM
- 虚拟DOM本质是Object对象
- 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
- 虚拟DOM最终会被转化成真实DOM，呈现在页面上
JSX
- react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
- 作用: 用来简化创建虚拟DOM
JSX语法规则
- 定义虚拟DOM时，不要写引号
- 标签中混入JS表达式时要用{}
  - 【注意】区分js语句和js表达式
    - 表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方（有返回值）
    - 语句：if、for、switch
- 样式的类名指定不要用class，要用className
- 内联样式，要用style={{key: value}}的形式去写
- 只有一个根标签
- 标签必须要闭合
- 标签首字母
  - 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
  - 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

三、实践练习例子

<script type="text/babel">
  const data = ["React", "Vue", "Angular"];
  const element = (
    <div>
      <h1>前端js框架列表</h1>
      <ul id="frontend">
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
  ReactDOM.render(element, document.getElementById("test"));
</script>

四、课后个人总结

初次接触JSX语法还是有一定的理解难度

React入门（一） ｜ 青训营笔记

一、本堂课重点内容

二、详细知识点介绍

1、为什么学习React

2、React特点

3、React基础语法

三、实践练习例子

四、课后个人总结

五、引用参考

React入门（一）｜青训营笔记