React

React

虚拟 DOM

• 通过 JS 模拟虚拟 DOM, 一个节点一个对象模拟, 节点之间出现了嵌套就成了一个 DOM
• 通过虚拟 DOM 实现 DOM 的高效更新(通过 Diff 算法比较新旧两个 DOM, 找出差异部分, 进行局部更新)
• Diff 算法
  1. tree diff: DOM 树时分层的, 每一层的比较就是 tree diff
  2. component diff: 在比较每一层的时候, 先比较组件的类型, 如果类型不一致就立即更新, 如果一直, 则在 component diff 算法这一层则临时认为二者相同
  3. element diff: 在 component diff 之后, 比较 component 中的元素

React 项目结构

.
├── build
├── package.json
├── src
│   ├── index.html
│   └── main.js
├── webpack.config.js
└── yarn.lock

2 directories, 5 files

• 和 vue.js 类似, 也是采用 Webpack 进行打包
• 需要的包
  1. react: 管理组件的创建和删除等于声明周期相关的操作
  2. react-dom: 管理虚拟 DOM, 将节点渲染到 DOM 上

React 创建元素

import React from 'react';
import ReactDOM from 'react-dom';


var div = React.createElement('div', {
    title: 'This is my first div created by React',
    id: 'first-div'
}, 'I am who I am');

ReactDOM.render(div, document.querySelector('#app'));

• render 的第一个参数要是一个 var div 之类的 container, 不能使我们定义的组件, 这和 vue 的 template 类似

配置 JSX

• yarn add -D @babel/preset-react
• yarn add -D babel-preset-react
• 在 .babelrc 中添加 js 和 jsx 的正则

JSX 语法(在 JSX 语法内部)

1. 在 { } 中可以写任何 js 的代码表达式
2. 在 < > 中可以写 JSX 语法
3. 元素属性 class 为 className, 因为在 es6 中 class 是关键字
4. 元素属性 for 要替换为 htmlFor
5. 使用注释, 需要把注释放到 {}中, 里面使用 /**/, 最终就是 { /* */ }
6. 创建组件
   1. 方法一
      1. function Foo() {} 构造函数, 注意: React 在解析标签的时候, 是按照标签的首字母大小写进行区分的, 如果为小写则 HTML 解析, 如果为大写则 React 解析
      2. 组件传值, 通过属性绑定传递给子组件, 在组件中如果要使用外部传递的值, 需要在构造函数中显示指定, 传递到子组件中的值都是只读的
   2. 方法二
      1. 定义一个类, 继承 React.Component, 实现 render 方法, 需要 return 我们需要其渲染的元素
      2. 组件传值时, 可以直接通过 this.props.属性名 获得, 这个功能是通过继承 React.Component 实现的, 和 function 定义一样, 属性都是只读的
      3. 如果我们要显示定义一个 constructor, 一定要在参数中写 props, 再将 props 传给 super(props)
      4. 除了 this.props, 还有 this.state 保存自己的数据
      5. 有自己的生命周期函数
      6. 在 render return 是一般加上 () 清晰一点

css 模块化

1. yarn add -D babel-plugin-react-css-modules 安装 css modules 插件
2. 在 webpack.config.js 中的 css 匹配中, 添加如下代码

['style-loader', {
    loader: 'css-loader',
    options: {
        modules: {
            localIdentName: '[name]_[local]-[hash:base64:5]',
        }
    }
}]

3. 所谓的 css 模块化也就是对 className 进行重命名, 使用了模块化的 css, .css 文件中默认定义的就是私有的, 如果加上 .global(.name) {font-size: 20px;} 等就不会对其进行重命名, 也就成为了全局 css

jsx 中常用

1. 遍历数据

list.map((item) => {
    return (
        ...
    )
})