前端

这篇笔记记录了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语法还是有一定的理解难度

五、引用参考