[React] 尚硅谷 -- 学习笔记(一)

第一章 React入门

React基本认识

用于构建用户界面的 JavaScript 库(View)

官网

英文官网: https://reactjs.org/

中文官网: https://doc.react-china.org/

特点

1. Declarative（声明式编码）
2. Component-Based（组件化编码）
3. Learn Once，Write Anywhere（支持客户端与服务器渲染，React-Native）
4. 高效
5. 单向数据流

高效的原因

1. 虚拟（virtual）DOM，不总是操作 DOM
2. DOM Diff 算法，最小化页面重绘

 

React基本使用

效果

<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    // 1.创建虚拟DOM元素对象
    var vDom = <h1>Hello</h1>// 不是字符串
    // 2．将虚拟DOM渲染到页面真实DOM容器中
    ReactDOM.render(vDom,document.getElementById('test'))
</script>

相关js库

• react.js: React的核心库

• react-dom.js: 提供操作DOM的react扩展库

• babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

** 使用React开发者工具调式**

• 在谷歌商店安装React_DeveloperTools插件
• 点击允许访问文件网址
• 在f12中找到settings,

 

React JSX

虚拟DOM

<script type="text/javascript">
    const msg = 'I Like You'
    const myId = 'DG'

    // 1.创建虚拟DOM元素对象
    const vDom1 = React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase())
    // 2．将虚拟DOM渲染到页面真实DOM容器中
    ReactDOM.render(vDom1,document.getElementById('test1'))
</script>

<script type="text/babel">
    // 1.创建虚拟DOM元素对象
    const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
    // 2．将虚拟DOM渲染到页面真实DOM容器中
    ReactDOM.render(vDom2,document.getElementById('test2'))
</script>

编码时基本只需要操作 react 的虚拟 DOM 的相关数据，react 会转换为真实的 DOM 变化从而更新界面（因为虚拟 DOM 很“轻”，而真实 DOM 很“重”；真实 DOM 改变会重绘，而虚拟 DOM 变化不会更新界面，只有在渲染后才更新）

JSX

• 全称：JavaScript XML

• react 定义的一种类似于 XML 的 JS 扩展语法 XML + JS

• 作用：用来创建 react 虚拟 DOM（元素）对象

  • a. var vDom = <h1>Hello JSX!</h1>

  • b. 注意1：它不是字符串，也不是 HTML/XML 标签

  • c. 注意2：它最终产生的就是一个 JS 对象

• 标签名任意：HTML 标签或其它标签（可以自定义）

• 标签属性任意：HTML 标签属性或其它（可以自定义）

• 基本语法规则

  • a. 遇到 ‘<’ 开头的代码，以标签的语法解析：html 同名标签转换为 html 同名元素，其它标签需要特别解析

  • b. 遇到 ‘{’ 开头的代码，以 JS 语法解析：标签中的 js 代码必须用 {} 包含

也就是说：js 中可以直接嵌套<标签>，但标签要嵌套 js 需要放在 {} 中

• babel.js 的作用

  • a. 浏览器不能直接解析 JSX 代码，需要 babel 转译为纯 JS 的代码才能运行

  • b. 只要用了 JSX，都要在 script 标签中加上 type="text/babel" 来声明需要 babel 来处理

渲染虚拟DOM(元素)

• 语法：ReactDOM.render(virtualDOM, containerDOM)

• 作用：将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示

• 参数说明

  • 参数一：纯 js 或 jsx 创建的虚拟 dom 对象

  • 参数二：用来包含虚拟 DOM 元素的真实 dom 元素对象(一般是一个 div)

<script type="text/babel">
    const names = ['jQuery', 'zepto', 'angular', 'react', 'vue']
    // 1.创建虚拟DOM元素对象
    const ul = (
        <ul>
            {names.map((name, index) => <li key={index}>{name}</li>)}
        </ul>
    )
    // 2．将虚拟DOM渲染到页面真实DOM容器中
    ReactDOM.render(ul, document.getElementById("example1"))
</script>

模块与组件和模块化组件化的理解

模块与组件

• 模块

  • 理解: 向外提供特定功能的js程序, 一般就是一个js文件
  • 为什么: js代码更多更复杂
  • 作用: 复用js, 简化js的编写, 提高js运行效率

• 组件

  • 理解: 用来实现特定功能效果的代码集合(html/css/js)
  • 为什么: 一个界面的功能太复杂了
  • 作用: 复用编码, 简化项目界面编码, 提高运行效率

模块化与组件化

• 模块化

  • 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

• 组件化

  • 当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用