React学习笔记

最新推荐文章于 2024-07-24 11:09:48 发布

ayksy468284

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量140

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/it-Ren/p/11407342.html

版权

React中几个核心概念

一.虚拟DOM（Virtual Document Object Model）（25%）

DOM的本质是什么：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作 DOM 对象的API；
什么是React中的虚拟DOM：是框架中的概念，是程序员用JS对象来模拟页面上的 DOM 和 DOM嵌套；
为什么要实现虚拟DOM（虚拟DOM的目的）：为了实现页面中， DOM 元素的高效更新
DOM和虚拟DOM的区别：
- DOM：浏览器中，提供的概念；用JS对象，表示页面上的元素，并提供了操作元素的API；
- 虚拟DOM：是框架中的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；
  - 本质：用JS对象，来模拟DOM元素和嵌套关系；
  - 目的：就是为了实现页面元素的高效更新；

模板引擎和for循环，会把所有（包括不需要的）都渲染一遍，浪费性能（不能按需更新）==>如何实现？新旧DOM树对比

为什么要减少DOM操作？ DOM操作会涉及到页面的重绘的重排

二.Diff（different）算法（25%）

tree diff:新旧两棵DOM树，逐层对比的过程，就是 Tree Diff；当整颗DOM逐层对比完毕，则所有需要被按需更新的元素，必然能够找到；
component diff：在进行Tree Diff的时候，每一层中，组件级别的对比，叫做 Component Diff；
- 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新；
- 如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上；

element diff:在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做 Element Diff；

三.在项目中使用 react

1.运行 cnpm i react react-dom -S 安装包

react： 专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中

react-dom： 专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()

2.在index.html页面中，创建容器：

<!-- 容器，将来，使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中 -->
<div id="app"></div>

3.导入包：

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

4.创建虚拟DOM元素：

// 这是 创建虚拟DOM元素的 API   <h1 title="啊，五环" id="myh1">你比四环多一环</h1>
// 第一个参数： 字符串类型的参数，表示要创建的标签的名称
// 第二个参数：对象类型的参数， 表示 创建的元素的属性节点
// 第三个参数： 子节点
// 第四个参数：其他同级子节点

const myh1 = React.createElement('h1', { title: '啊，五环', id: 'myh1' }, '你比四环多一环')

5.渲染：

// 渲染虚拟DOM元素
// 参数1： 表示要渲染的虚拟DOM对象
// 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象
ReactDOM.render(myh1, document.getElementById('app'))

四.JSX语法

什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）

如何启用 jsx 语法？
- 安装 babel 插件
  - 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  - 运行cnpm i babel-preset-env babel-preset-stage-0 -D
- 安装能够识别转换jsx语法的包 babel-preset-react
  - 运行cnpm i babel-preset-react -D
- 添加 .babelrc 配置文件
```
{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}
```
- 添加babel-loader配置项：
```
module: { //要打包的第三方模块
    rules: [
     { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
   ]
}
```
jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的；
在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到 { } 中
- 渲染数字
- 渲染字符串
- 渲染布尔值
- 为属性绑定值
- 渲染jsx元素
- 渲染jsx元素数组
- 将普通字符串数组，转为jsx数组并渲染到页面上【两种方案】
在 jsx 中写注释：推荐使用{ /* 这是注释 */ }
为 jsx 中的元素添加class类名：需要使用className 来替代 class；htmlFor替换label的for属性
在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
在 jsx 语法中，标签必须成对出现，如果是单标签，则必须自闭和！

当编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 { } 就把花括号内部的代码当作普通JS代码去编译；

什么时候用 { } 呢？当我们在需要JSX控制的区域内，写JS表达式了，则需要把JS代码写到 { } 中

在React 组件中申明方法并调用

    constructor(){
        }        
   //写在constructor下面
    toDecimal=(x)=>{ 
        var f = parseFloat(x); 
        if (isNaN(f)) { 
          return; 
        } 
        f = Math.round(x*1000000)/1000000; 
        return f; 
    }
    //处理时间戳
    timestampToTime = (timestamp) => {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D+h+m+s;
    }            


调用 ：

this.columns = [

{

width:400,

title: '记录创造时间',

dataIndex: 'first_day',

key: 'first_day',

render: (props) => {

return this.timestampToTime(props);

}

]

抽离单独样式表style.js模块暴露出去

1 export default {
2     item: { border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc' },
3     user: { fontSize: '14px' },
4     content: { fontSize: '12px' }
5 }

style.js

使用样式模块：

 1 import React from 'react'
 2 
 3 import styles from '../css/style'
 4 export default function CmtItem(props) {
 4   return <div style={styles.item}>
 6     <h1 style={styles.user}>评论人：{props.user}</h1>
 7     <p style={styles.content}>评论内容：{props.content}</p>
 8   </div>
 9 }

React图片如何引用？

<img src={require('../../assets/image/iphone_help_search@3x.png')} />
import nav2x from './image/nav@2x.png';
<img className="navButton more1920" src={nav2x} alt=''></img>

ref

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；

<CustomTable
                        scroll={{x: 1600}}
                        url={'/api/follow/release/list'} columns={this.columns} ref={(me) => {
                        this.custom_table = me
}}/>

父组件通过 this.custom_table.xxx 可以直接获取子组件里面的值和属性

坑：

1. import abc from　‘xxx/xxx/xxx.css’ console.log(abc) 是一个空对象，因为JS文件想要拿到东西必须要export default 而css文件不能暴露出去。

无论在哪里导入的css样式表默认全局生效在哪里都可以用里面的声明 ====》解决样式冲突（vue中使用 <style scoped> </style> 解决，而React中没有指令的概念）：

（安装了CSS-loader后报错 This relative module was not found:）是因为没有装 style-loader

   {
        test: /\.css$/,
        //css-loader?后的固定参数modules启用模块化
        use: ['style-loader', 'css-loader?modules'], modules&localIdentName[path][name]-[local]-[hash:10]//后面可加四个参数
      },

有个条件只针对类/id选择器生效

className一起写： <h1 className={ cssObj.title + "test" }></h1> 或者 <h1 className={ [ cssObj.title , "test" ].join( ' ' ) }></h1>（给数组中每个项空格起来）

样式全局：

1 :global(.nav){
2  
3 }

转载于:https://www.cnblogs.com/it-Ren/p/11407342.html

ayksy468284

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习笔记

React中几个核心概念一.虚拟DOM（Virtual Document Object Model）（25%）DOM的本质是什么：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作 DOM 对象的API；什么是React中的虚拟DOM：是框架中的概念，是程序员用JS对象来模拟页面上的 DOM 和 DOM嵌套；为什么要实现虚拟DOM（...
复制链接

扫一扫