React 学习笔记4 Diffing/脚手架

目录

Diffing算法

key

脚手架

create-react-app

安装

项目结构

hello world Demo

Diffing算法

当页面上显示的内容更新时/初始化时，React会将需要更新/初始化的内容形成虚拟DOM，并和之前的虚拟DOM（如果有）进行比较，把需要更新的内容推到页面上，而不是整个DOM全部都更新。

key

key是虚拟DOM的一个标识，在对比更新时，key可以用于判断新旧虚拟DOM中前后节点是否是同一个。如果在旧虚拟DOM中找到了与新虚拟DOM中一样的key，则可以确定这两个节点是同一个，如果虚拟DOM中的内容没变，则直接复用，如果虚拟DOM中的内容改变了，则生成新的DOM并进行替换。如果旧虚拟DOM中没有和新虚拟DOM一样的key，会将这个DOM生成并渲染到页面。

如果将index索引值作为Key，在组数数据更新时，可能会产生效率问题。如果数据添加到组数最末尾，不会破坏前面的数据顺序，那么并不会影响效率，但是，如果数据插入了数组最前方或者数据中间某个位置，这会导致数组中元素的index和之前并不一致，diffing算法在进行比较时，会拿着两个其实并不一致的DOM对比，并认为数据发生了改变，会生成新的真实DOM并进行渲染，会重新渲染数据，而不是复用，产生效率问题。而且，如果标签内部含有输入类DOM（input输入框、radio单选器、checkbox、select等），当使用Index作为索引值时，动态插入数据时，如果数据并不是插入最末尾，输入框中的数据也会由于前后Index相同的DOM元素其实并不是同一个，导致Input数据发生错乱。

如果不存在对数据的逆序加入、删除等操作，使用index作为key并不会产生问题的，但是，一旦数据的顺序发生改变，使用index作为Key就会产生问题。

脚手架

create-react-app

create-react-app是React提供的一个脚手架，脚手架可以用于快速创建基于某个库的模板项目。包含了基础的需要的配置，并且可以下载好所需的相关依赖。使用脚手架，可以实现模块化、组件化、工程化。

安装

1.全局安装 npm install -g create-react-app

（如果提示网络错误，可以先设置npm config set registry http://registry.npmjs.org/
）

2.创建项目 create-react-app 项目名

3.进入项目名文件夹，启动项目 npm start

项目结构

public 静态资源文件，存放页面、公共图片、样式等

------index.html 应用主页面，组件都渲染到这个页面上，整个项目下只有一个html文件

------mainfest.json 应用加壳配置

------robots.txt 爬虫规则，当前网站被爬取时，规定哪些数据可以被爬取，哪些不行

src 

------App.css APP组件样式

------App.js 生成App组件，组件首字母大写

------App.test.js APP组件测试文件

------index.css 通用样式，也可以放入public下，并在html中引入

------index.js 入口文件

------reportWebVitals.js 记录页面性能，内部使用web-vitals库，使用时需要自己编写配置，并不是完全配好的

------setupTests.js 用于组件测试，也是需要自己配置，使用了库jest-dom

public-index.html

src-index.js

hello world Demo

在react中，.js和.jsx文件import时可以省略扩展名

import './App.css';
import React from 'react'

class App extends React.Component{
  render(){
    return (
      <div>
        <h2>hello world</h2>
      </div>
    )
  }
}


export default App;

在实际编写项目时，一般在src下创建components文件，把组件放入components文件中，每个组件一般也都是一个文件夹，里面放置组件的js和组件的其他资源文件等，最后在App组件中引入使用。

src/components/Hello/hello.css

h2{
    background-color: aquamarine;
}

src/components/Hello/index.jsx

import {Component } from 'react'
import './hello.css'

export default class Hello extends Component{
    render(){
        return (
            <div>
                <h2>Hello</h2>
            </div>
        )
    }
}

src/components/World/world.css

.world{
    background-color:blueviolet;
}

src/components/World/index.jsx

import {Component } from 'react'
import './world.css'

export default class Hello extends Component{
    render(){
        return (
            <div>
                <h2 className='world'>World</h2>
            </div>
        )
    }
}

src/App.js

import './App.css';
import React from 'react'
import Hello  from './components/Hello'
import World from './components/World'
class App extends React.Component{
  render(){
    return (
      <div>
        <Hello/>
        <World/>
      </div>
    )
  }
}


export default App;

如果组件文件以js结尾，有时候，js结尾的文件并不是全是组件，一般为了区分组件和一般js文件，可以让组件的js文件名首字母大写，或者让组件文件以.jsx为扩展名。

样式模块化

对于两个组件，如果他们各有自己的css文件，且css文件中存在冲突的命名，则后引入的样式会覆盖先引入的文件，为了避免这种情况，首先，要给css的名字之前先加上module，然后，在引入样式时，给引入的样式命名，然后给组件中标签配置样式时，配置命名.样式，就可以避免冲突。

hello.module.css

.h2Demo{
    background-color: aquamarine;
}

hello/index.jsx

import {Component } from 'react'
import hello from './hello.module.css'

export default class Hello extends Component{
    render(){
        return (
            <div>
                <h2 className={hello.h2Demo}>Hello</h2>
            </div>
        )
    }
}

world.module.css

.h2Demo{
    background-color:blueviolet;
}

world/index.jsx

import {Component } from 'react'
import world from './world.module.css'

export default class Hello extends Component{
    render(){
        return (
            <div>
                <h2 className={world.h2Demo}>World</h2>
            </div>
        )
    }
}

对一个jsx文件，里面的内容框架是固定的，可以通过一些代码片段快速生成框架，不需要自己完全手敲。要实现这种效果，需要先安装插件：

然后再敲rcc，就能生成react类式组件的框架，

import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
      <div>index</div>
    )
  }
}

敲rfc能生成函数式组件的框架。

import React from 'react'

export default function index() {
  return (
    <div>index</div>
  )
}

在插件的details部分，可以查看其他的代码片段：

组件化流程

1. 拆分组件：把界面拆分成一个个组件

2. 实现静态组件

使用组件实现静态页面的效果

3. 实现动态组件

3.1能够动态显示初始化数据

3.2能够交互

父组件给子组件传值

通过props传递。

父组件App.js

import './App.css';
import React from 'react'
import World from './components/World'
class App extends React.Component{
  state = {
    dataList:[
      {id:'001',name:'a',flag:true},
      {id:'002',name:'b',flag:true},
    ]
  }
  

  
  render(){
    return (
      <div>
        <World dataList={this.state.dataList}/>
      </div>
    )
  }
}


export default App;

子组件World/index.jsx

import {Component } from 'react'
import world from './world.module.css'

export default class Hello extends Component{
    render(){
        console.log(this.props.dataList)
        return (
            <div>
                <h2>1</h2>
            </div>
        )
    }
}

子组件给父组件传值

通过函数，父组件先通过props给子组件传递一个函数，子组件调用函数时，以参数的形式给父组件传递数据。

父组件App.js

import './App.css';
import React from 'react'
import Hello  from './components/Hello'
import World from './components/World'
class App extends React.Component{
  state = {
    dataList:[
      {id:'001',name:'a',flag:true},
      {id:'002',name:'b',flag:true},
    ]
  }
  
  setList = (dataObj)=>{
    let newList = [dataObj,...this.state.dataList]
    console.log(newList)
    this.setState({dataList:newList})
  }
  
  render(){
    return (
      <div>
        <Hello setList={this.setList}/>
        <World/>
      </div>
    )
  }
}


export default App;

子组件Hello/index.jsx

import {Component } from 'react'

export default class Hello extends Component{
    setData = ()=>{
        this.props.setList(
            {id:'003',name:'c',flag:false}
        )
    }

    render(){
        return (
            <div>
                <button onClick={this.setData}>click</button>
            </div>
        )
    }
}