侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论

React认知,React元素,工程化使用

woku
2022-04-19 / 0 评论 / 0 点赞 / 119 阅读 / 3,922 字

React的介绍

💡 React不是一个框架(framework),是一个Javascript库(library)

  • React 是一个用于构建用户界面(UI,对咱们前端来说,简单理解为:HTML 页面)的 JavaScript 库
  • 如果从mvc的角度来看,React仅仅是视图层(V)的解决方案。也就是只负责视图的渲染,并非提供了完整了M和C的功能
  • 是一个视图渲染的工具库,不做框架的事情

React的简单使用

准备一个根容器 - div(id="app")
引入CDN

<body>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <div id="app"></div>
  <script src="index.js"></script>
</body>

声明类,这个类继承React.components

在这个类中,数据是放到state属性中,必须提供一个render方法并返回JSX,来渲染视图

class myButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      a: 1,
      b: 2
    }
  }
  render() {
    return '视图'
  }
}

ReactDOM.render()渲染视图
参数1:React元素
参数2:渲染到哪个根节点

ReactDOM.render(React.createElement('div', {
  "tag-name": 'div'
}, 'this is my first react experience'),
 document.getElementById('app')
)
// React.createElement 创建一个React元素
// 参数1:元素名  参数2:元素的prop, 参数3:子节点
// 如果子节点还是一个元素,继续使用React.createElement创建
var span = React.createElement('span', {
  className: 'txt'
}, 'this is a span')
ReactDOM.render(React.createElement('div', {
  "tag-name": 'div'
}, [
  span
]),
 document.getElementById('app')
)

React.createElement可以有三个参数,也可以放入一个React组件
这个React组件必须:
1.继承React.Component
2.render函数返回一个视图

class MyButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      a: 1,
      b: 2
    }
  }
  render() {
    return '视图'
  }
}


ReactDOM.render(React.createElement(MyButton),
 document.getElementById('app')
)

render函数返回其他结构

class MyButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  render() {
    const p = React.createElement('p', {
      className: 'num',
      key: 1
    }, this.state.count)
    const button = React.createElement('button', {
      className: 'btn',
      key: 2,
      onClick: () => this.setState({
        count: this.state.count + 1
      })
    },'count增加1')
    const wrapper = React.createElement('div', {
      className:'wrapper'
    },[
      p,
      button
    ])
    return wrapper
  }
}


ReactDOM.render(React.createElement(MyButton),
 document.getElementById('app')
)

💡 ReactDOM: 从render -> 虚拟DOM -> 真实DOM
  React:提供处理视图的API集合

ReactDOM.render

dom的渲染和更新都是由ReactDOM.render来统一管理,管理根节点里面的所有内容。
通过ReactDOM.render方法将React元素渲染到根节点中。

参数

参数1:ReactElement (react元素)
参数2:rootNode (根节点)

const rEl = <h2>this is a h2</h2>
ReactDOM.render(rEl, document.getElementById('root'))

基本的更新逻辑

不可变对象

React元素是不可变对象(immutable Object)

  • 不能添加属性
  • 不能修改属性
  • 不能删除属性
  • 不能修改属性的枚举,配置和可写(enumerable/configurable/writable)
const rEl = <h2>this is a h2</h2>
//delete rEl.props
//rEl.props = 123
//rEl.a = 1
// 上面的都会报错
ReactDOM.render(rEl, document.getElementById('root'))

更新逻辑

import ReactDOM from "react-dom";
function update() {
  const rEl = (
    <div>
      <h2>
        this is a title
      </h2>
      <p>{ new Date().toString() }</p>
    </div>
  )
  ReactDOM.render(rEl, document.getElementById('root'))
}
setInterval(update, 1000)

观察element中节点的更新状态:更新的时候,只有p里面的内容更新,h2标签内没有更新
ReactDOM会深度对比新旧元素的状态,只会做必要的真实DOM更新

未命名.gif

渲染之前:每个React元素会形成一个虚拟DOM的对象结构 -> 渲染
更新之前:生成新的虚拟DOM对象结构 -> 对比新旧虚拟DOM节点 -> 分析两者不同 -> 形成DOM更新补丁 -> 操作真实DOM

渲染组件

import { Component } from "react";
import ReactDOM from "react-dom";

class Title extends Component {
  render() {
    return (
      <div>this is a title</div>
    )
  }
}
// ReactDOM.render(<Title />, document.getElementById('root'))
ReactDOM.render(React.createElement(Title), document.getElementById('root'))

💡 ReactDOM.render的第一个参数一定要是React元素,不能直接是Title这样的类名
使用JSX语法
使用React.createElement将组件转为React元素
这样函数组件/类组件才能执行,函数/类 内部的render函数才能执行

工程化

  • 命令:npx create-react-app react-basic
    • npx create-react-app 是固定命令,create-react-app 是 React 脚手架的名称
    • react-basic 表示项目名称,可以修改
  • 启动项目:yarn start or npm start
  • npx 是 npm v5.2 版本新添加的命令,用来简化 npm 中工具包的使用
    • 原始:1 全局安装npm i -g create-react-app 2 在通过脚手架的命令来创建 React 项目
    • 现在:npx 调用最新的 create-react-app 直接创建 React 项目
  • npm run build 进行打包构建

基本步骤

  • 使用步骤
- 导入react和react-dom     
- 创建react元素(虚拟DOM)
- 渲染react元素到页面中
  • 导入react和react-dom
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
  • 创建react元素
// 创建元素
const title = React.createElement('h1', null, 'hello react')
  • 渲染react元素到页面
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

0

评论区