首页 技术教程Web前端CSS教程正文

从零开始学React框架

原创
小哥 3年前 (2022-11-01) 阅读数 294 #CSS教程
文章标签 reactCSS

react 基础知识清单

1.React基础使用

在学习之初，使用Simple htmlWRITE，未来将使用更高顺序的写作




    
    
    
    
    
    
    01 react test

区别：

  1. 虚拟 dom 是一个object 对象类型，实型 dom 是节点；
  2. 虚拟 dom 更轻，没错 dom 重，debugger 可查；
  3. 虚拟 dom 最终会被 react 变得真实 dom，显示在页面上；

2.JSX语法规则




    
    
    
    
    
    
    02 JSX语法糖

jsx 语法糖规则

        1. 定义虚拟 DOM 不要写引号。
        2. 混入标签 JS 该表达式将被使用。{}。
        3. 不要使用样式的顶级类名 class，要用 className。
        4. 内联样式，要使用 style{{key:value}}写作的形式。
        5. 只能有一个根标签。
        6. 标签必须关闭。
        7. 标签首字母
            （1）.如果小写字母开始， 标签将被转换 html 中具有相同名称的元素，如果 html 如果没有与中的标签对应的同名元素，则会报告错误。
            （2）.如果大写字母开始，react 要呈现相应的组件，如果组件未定义，则会报告错误。

3.JSX语法糖遍历




    
    
    
    
    
    
    语法糖练习第二天练习

4.安装 react-tools调试工具

下载地址：https://gitee.com/loki-demo/react_dev_tools

5.React 定义组件(功能组件)

功能组件注意事项

  1. 首字母必须大写
  2. 该函数必须具有返回值 return
  3. 渲染必须写入组件标签并关闭。

渲染ReactDOM.render(..。在那之后，发生了什么？

  1. React 分析元件注释，查找 MyCompontent组件。
  2. 发现该组件是使用函数定义的，然后调用该函数，该函数返回虚拟DOM转为真实 DOM,然后，它会显示在页面上。

6.React 定义组件(类组件)

功能组件注意事项

  1. 首字母必须大写
  2. 该函数必须具有返回值 return
  3. 渲染必须写入组件标签并关闭。

渲染ReactDOM.render(..。在那之后，发生了什么？

  1. React 分析元件注释，查找 MyCompontent组件。
  2. 发现组件是使用类定义的，下面是 new 从类的实例中取出并通过该实例调用原型。 render方法。
  3. 将 render 返回的虚拟 DOM 转为真实 DOM,然后，它会显示在页面上。

7.React 三个核心属性之一 state 使用

标准写法

简写方法

8.React 三个核心属性之一 props 使用

标准写法

简写写法


注意：

  1. 速记方法需要在类中编写并使用。 static 修饰；props 只读，不能修改；
  2. {…person} 可以处理对象或数组；通常情况下，只能处理数组，但在{}如果你把它包起来，你就可以暴露物体并跟随它。 vue 的很像；
  3. propTypes 和 PropTypes 为了区分，前者是阶级的财产，后者是阶级的财产的类型。. string.number.func (方法)；
  4. defaultProps 是这是prop 缺省值；
  5. constructor 类的构造者的角色是什么？
    作用：
    （1）初始化 state 在数据中，事件处理程序的绑定实例为。bind 一个this可以调用的方法。

如果构造函数只有上述两个函数，则可以直接编写，无需使用。 state 并且剪头函数的方法可以完全取代构造函数。是否使用构造函数取决于您是否希望在构造函数中接受它。 this.props ，如果使用构造函数，则必须。 super 和接受

constructor(props){
        super(props)
        console.log(this.props)
    }

9.React 三个核心属性之一 refs------不要过度使用 ref

字符串类型。 ref ->虽然简单，但不推荐，以后可能会被移除，说效率不高！

回调类型 ref

注意：

  1. ref={ © => { this.inputLeft = c} } 将使用回调方法。{}括起来；

  2. onClick={this.getInfo} 也应该使用普通的方法。{}括起来；

  3. ref={ © => { this.inputLeft = c} }(复杂的写作) ，ref={c => this.inputRight = c} (速记)

  4. 注释 jsx 语法用{}它变成了 js，在用/**/注释可以通过将其括起来来实现。 jsx；

    {/<input ref={ (c) => { this.inputLeft = c} } type="text" />/}

  5. 内联 ref={ © => { this.inputLeft = c} }在调用期间呈现两次调用可能存在问题； ref 的写法 ref={this.inputLeftF}
    相应地生成一个 inputLeftF = (e)=>{ this.inputLeft = e }不会有两个电话 ref 问题；这个问题不大，你可以用任何方式写，但要知道这个问题的本质，如果有人很严重，你可以和他一起手术~~

    <!DOCTYPE html>

createRef的使用

注意：

  1. inputLeft = React.createRef() 创建 ref 容器 专人专用
  2. <input ref={this.inputLeft} type="text" /> 调用
  3. this.inputLeft.current.value 获取节点的值

10.React 不受控制的部件和受控组件之间的区别

  1. 不受控制的组件(现已首次采用)

    <!DOCTYPE html>

  1. 受控组件(维护 state 状态中）

    <!DOCTYPE html>


3. 高次函数与函数化

  1. 什么是高阶函数？自变量是函数或者返回值是满足高阶函数之一的函数，
    常见的高阶函数：map 、filter、reduce、setTimeout等

  2. 什么是功能化？
    我自己的理解是，函数中的函数集和函数集

    <!DOCTYPE html>

11.React 生命周期 (非常重要)

1. 旧版本

  1. 初始化阶段：ReactDOM.render()触发 ----初次渲染;

    1. constructor()
    2. componentWillMount()
    3. render() ====》必须用
    4. componentDidMount() ====》常用
      1） 注意：一般来说，在这个钩子中做一些初始化的事情，打开定时器，发送网络请求，订阅消息等；

  2. 更新阶段：按组件内部。 this.setState()或父组件 render 触发;

    1. componentWillReceiveProps()=>仅当更新父组件时 render 时触发
    2. shouldComponentUpdate() （this.forceUpdate()不是这个)
    3. componentWillUpdate()
    4. render()====》必须用
    5. componentDidMount()

  3. 卸载组件：ReactDOM.unmountComponentAtNode(documnet.getElemengById())触发;

    1. componentWillUnmount() ====》常用
      1） 注意：一般来说，在这个钩子上做一些收尾工作，关闭定时器，取消订阅消息；

旧版本如下图所示

2.新的生命周期

  1. 初始化阶段：ReactDOM.render()触发 ---- 初次渲染;

    1. constructor()
    2. getDerivedStateFromProps()
    3. render() ====》必须用
    4. componentDidMount() ====》常用
      1） 注意：一般来说，在这个钩子中做一些初始化的事情，打开定时器，发送网络请求，订阅消息等；

  2. 更新阶段：按组件内部。 this.setState()或父组件 render 触发;

    1. getDerivedStateFromProps() ----> 挂载后，执行以下命令
    2. shouldComponentUpdate()
    3. render()
    4. getSnapshotBeforeUpdate() —> 是否要拍摄更新的快照(保留以前的数据)
    5. componentDidMount()

  3. 卸载组件：ReactDOM.unmountComponentAtNode(documnet.getElemengById())触发;

  4. componentWillUnmount() ====》常用
    1） 注意：一般来说，在这个钩子上做一些收尾工作，关闭定时器，取消订阅消息；

图如下图

注意：新版本的钩子和旧版本的钩子之间的区别。

  1. 新版本放弃了三个旧版本。 will 钩子（componentWillMount，componentWillUpdate，componentWillReceiveProps）；
  2. 添加了两种新方法 (getSnapshotBeforeUpdate , getDerivedStateFromProps)

最常用的重要挂钩

  1. render:初始化渲染或更新渲染调用；
  2. componentDidMount:打开监听并发送 ajax 请求；
  3. componentWillUnmount:做一些整理工作，如清洁计时器；

12.React DOMDE Diffing 算法


自己diff总结：

diff 该算法是查找不同的；根据要查找的节点，如果该节点中有节点，则 diff 会被深度比较；

13.React 棚架的使用

  1. 创建项目并启动

  2. 脚手架的安装 ：npm i -g create-react-app （window） sudo npm i -g create-react-app（max）

  3. 创建项目：create-react-app 项目名称

  4. 启动项目：yarn start

  5. 包装好的物品：yarn build

  6. 把 wepack.config.js 默认情况下，隐藏文件被暴露；yarn eject

react脚手架创作工程特别注意事项

  1. %PUBLIC_URL% 代表public 文件路径；

  2. <meta name="viewport" content="width=device-width, initial-scale=1" /> 用于打开视窗和适配移动终端；

  3. <meta name="theme-color" content="#000000" /> 用于配置浏览器选项卡+地址栏的颜色(只支持Android手机浏览器，兼容性不是很好；)；

  4. <meta name="description" content="Web site created using create-react-app" /> 描述网站信息；

  5. <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 用于在后台将首页添加到手机主屏幕上的图标；

  6. <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 应用外壳配置文件，即E.H5可转化为Android；

  7. <noscript>You need to enable JavaScript to run this app.</noscript> 浏览器不支持 js 显示标签的内容；

  8. React.StrictMode严格监控 <App /> 组件中的书写是否合理；

    ReactDOM.render(

    , document.getElementById(root) );

  9. reportWebVitals 页面 性能分析文件(必填 web-vitals图书馆支持)；

  10. setupTests.js 用于组件单元测试的文件(必需 jest-dom 图书馆支持)；

  11. css模块化风格：

1).css文件名为：index.module.css
2).在 jsx 在文件中引入hello使用hello.title

import { Component } from "react";
import hello from ./index.module.css

export default class Hello extends Component {
    render() {
        return (
            
我是 Hello 组件

        )
    }
}

  1. **快速生成代码片段 类别和功能

    rcc 是快速生成的类代码片段。

    rfc 是一个快速生成的函数代码片段。

    **

注意：需要安装插件 使用快捷键的步骤

  1. 引入组件顺序

1>. 在第三方之上 ->react react-dom nanoid uuid
2>. 自己的文件 ->自定义组件
3>. 样式文件 ->css 文件

  1. 脚手架创建组件

    import React, { Component } from react // 第三方文件简介 import ./index.css // 引入自定义样式 export default class Item extends Component { // export default 暴露节点 state = { // 变量，它等同于vue 中的 data mouse: false } mouseEnter = (flag) => { // 方法：使用剪头功能。 return () => { this.setState({ mouse: flag }) } } change = (id) => { // 方法：使用剪头功能。 return (e) => { // 高阶函数 this.props.updataTodo(id, e.target.checked) // 调用父组件传递的方法，返回返回值； } } handerDel = (id)=>{ console.log(id,id....) } render() { let { item } = this.props // 用于获取结构赋值的值 let { mouse } = this.state // 用于获取结构赋值的值 return ( <li style={{ background: mouse ? #f9f9f9 : #fff }} className=item onMouseEnter={this.mouseEnter(true)} // 一种鼠标进入触发方法 onMouseLeave={this.mouseEnter(false)} // 一种鼠标离开触发方法 onChange={this.change(item.id)} //鼠标更改触发器方法并调用该方法中父组件传递的函数，因为有圆括号，所以这 change 方法需要使用高阶函数，否则它们将默认执行，或者可以用来删除该按钮，这对于高阶函数是不实用的；

    <div className=item-del @click={()=>{this.handerDel(item.id)}} style={{ display: mouse && item.finish ? block : none }}>Del

// 不要使用高阶函数 ) } }

注意：1.如果要在方法中传递值，则需要使用或不使用高阶函数。@click={()=>{this.handerDel(item.id)}} ；2.调用从父组件函数传递的函数 this.props.updataTodo()

  1. 生成随机数 可用于当ID；uuid(较大，不推荐)nanoid(小号，推荐)

安装 uuid nanoid

npm i uuid          /       yarn add  uuid
npm i nanoid        /       yarn add  nanoid

使用 uuid nanoid

import {nanoid} from nanoid;

console.log(nanoid());

  1. Proptypes 用于限制传输规范等限制的使用。

安装 Proptypes

npm i prop-types          /       yarn add  prop-types

使用 Proptypes

import Proptypes from prop-types;

    // 对接受参数需求的限制。
    static propTypes = {
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
            age:PropTypes.number,
            speak:PropTypes.func , // 传递函数
    }
    // 设置标签的默认值
    static defaultProps = {
        sex:保密,
        age:18
    }

  1. 该函数用于展开修改默认值的方法。

    checkAll = () => { const {todos} = this.state let newTodos = todos.map(item=>{ return {...item,finish:true} // 返回展开的item 并把 item 中的所有 finish 所有值都将被替换 true })

    }

14.React 空白版本样式 方便调试 todos

下载链接

15.React 请求接口

1. 建议使用 axios轻量级 不推荐 jquery 太大；
2. 安装 axios

yarn add axios   ||  npm install axios

3. 使用

import axios from axios

//调用接口
axios.get().then(
        response => { },
        error => { } 
)

注意： 1.跨域解决方案，如下图所示

解决跨域方法一。

求解跨域方法II


求解跨域方法III

直接找到后端，让后端来处理！

2.安装fehelper 组织请求接口格式页 json 文件

地址： https://www.baidufe.com/fehelper/index/index.html

安装方法
下载当前最新版本*.crx
chrome浏览器地址栏输入：chrome://extensions/ 并打开
右上角打开开发人员模式
拖拽crx转到当前页面并完成安装。

16.React 结构赋值 连续结构分配 连续结构分配

17.React

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

上一篇：Ps快速更改头发颜色 下一篇：如何解决用ESLint验证导致报错的问题
相关文章
小哥

小哥

作者文章
浏览更多
热门
最新文章
标签列表
粤ICP备19068341号
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
Powered By Z-BlogPHP Theme By 编程老白