React 入门

谁践踏了优雅 2022-10-16 04:56 122阅读 0赞

## React 入门 ##

[尚硅谷 2021 版 React 技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）][2021 _ React]

### React 特点 ###

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

### 虚拟 DOM 两种创建方式 ###

**JSX 方式**

`babel.min.js`

*  ES6 -> ES5
 *  jsx -> js

`react.development.js`

`react-dom.development.js`

<div id="test"></div>
    
    <script src="./js/react.development.js"></script>
    
    <script src="./js/react-dom.development.js"></script>
    
    <script src="./js/babel.min.js"></script>
    
    <script src="./js/prop-types.js"></script>
    
    <script type="text/babel"> // 1.创建虚拟DOM const VDOM = <h1>Hello React</h1> // 此处一定不要写引号，因为不是字符串 // 2.渲染虚拟DOM到页面 ReactDOM.render(VDOM, document.getElementById('test')) </script>

**JS 方式**

`document.creatElement` 创建真实 DOM

`React.creatElement` 创建虚拟 DOM

<div id="test"></div>
    
    <script src="./js/react.development.js"></script>
    
    <script src="./js/react-dom.development.js"></script>
    <script type="text/javascript"> // 1.创建虚拟DOM const VDOM = React.createElement( 'h1', { id: 'title', }, 'Hello React' ) // 2.渲染虚拟DOM到页面 ReactDOM.render(VDOM, document.getElementById('test')) </script>

### 虚拟 DOM ###

1.  本质是 Object 类型的对象（一般对象）
2.  虚拟 DOM 比较轻，真实 DOM 比较重，因为虚拟 DOM 是 React 内部在用，无需真实 DOM 那么多属性
3.  虚拟 DOM 最终会被 React 转换为真实 DOM，呈现在页面上

### JSX 语法规则 ###

1.  定义虚拟 DOM 时，不要写引号
2.  标签中混入 JS 表达式要用 `{}`
3.  样式的类名指定不要用 class，要用 className
4.  内联样式，要用 `style={ { key: vale }}` 的形式去写，其他的不允许直接嵌入一个对象
5.  只有一个根标签，可以使用 `<></>` fragment 空节点
6.  标签必须闭合
7.  标签首字母
    
     *  若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无此标签对应的同名元素，则报错（unrecognized）
     *  若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错（not defined）
8.  循环处理的 jsx 元素需要设置一个唯一的 key

**JS 语句与 JS 表达式**

以下均为表达式：

1.  `a`
2.  `a+b`
3.  `fn(1)`
4.  `arr.map()` 有返回值
5.  `function test () {}`

以下均为语句：

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

const data = ['Angular', 'React', 'Vue']
    const VDOM = (
      <div>
        <ul>
          {data.map((item, i) => {
            return <li key={i}>{item}</li>
          })}
        </ul>
      </div>
    )

### 模块化与组件化 ###

模块：向外提供特定功能的 JS 程序，一般就是一个 JS 文件

组件：用来实现局部功能效果的代码和资源的集合（`html/css/js/image...`）

模块化：应用的 JS 都以模块来编写，这个应用就是一个模块化应用

组件化：应用是以多组件的 方式实现，这个应用就是一个组件化应用

[2021 _ React]: https://www.bilibili.com/video/BV1wy4y1D7JT?p=35&spm_id_from=pageDriver