蓁祎家进步中

# React概览

返回：大前端 | 返回：最全导引

React

是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

函数组件与类组件的不同 react的一些技巧使用
hooks Redux
将React作为UI运行时 JSX简介
组件和普通JSX语法区别 JSX中使用三元运算符
箭头函数 react高效技巧
refs 合成事件event
Suspense 组件
面试 错误提示及调整方法
生命周期函数 React中的疑惑点

# React 事件和 dom 事件

返回顶部

WARNING

Chrome 中打印的对象展开的时候显示的是当前对象的值，可能已经不是打印的时候的值了，所以需要通过在打印的地方打断点的形式来查看准确的值。或者直接通过打断点查看。

  • 事件名 jsx 中采用驼峰命名。
  • 参数是一个事件处理函数

# 原生的 dom 事件

click 事件和 href 的优先级：click >>> href

  • Dom 元素中直接绑定
    • 直接在 html 中写为字符串
    • 将 js 代码放到 js 函数中

如果在后面写 return false 可以阻止默认事件。注意只能是字符串形式的 js 代码，方法调用不行。

<span onclick="console.log('我被点击了！！！')">Click me</span>
1
<span onclick="handle()">Click me</span>
function handle() {
    console.log('我被点击了！！！);
}
1
2
3
4
  • 在 JavaScript 代码中绑定
    • DOM0 的写法：直接在 dom 对象上注册事件名称
    • Dom 2 的写法
      • DOM2 支持同一dom元素注册多个同种事件。
      • DOM2 新增了捕获和冒泡的概念。
      • DOM2 事件通过 addEventListener 和 removeEventListener 管理

此时返回 false 可以阻止默认事件。

    elementObject.onclick = function(){
        // 事件处理代码
    }
1
2
3
    ele.addEventListener(‘click’, handle, false);
1

# 事件对象

无论在DOM0还是DOM2还是DOM3中都会在事件函数中传入事件对象

  • 常用属性：
    • currentTarget ： 当前时间程序正在处理的元素, 和this一样的;
    • target || srcElement： 事件的目标
    • view ： 与元素关联的window， 我们可能跨iframe；
    • eventPhase： 如果值为1表示处于捕获阶段， 值为2表示处于目标阶段，值为三表示在冒泡阶段
    • preventDefault() 取消默认事件；
    • stopPropagation() 取消冒泡或者捕获；
      • 除了阻止事件的冒泡，还阻止事件的继续捕获，简而言之就是阻止事件的进一步传播。
    • stopImmediatePropagation 阻止绑定在事件触发元素其他同类事件的callback的运行
    • trusted： 为ture是浏览器生成的，为false是开发人员创建的（DOM3）

# React 事件

  • 不传参数
    <div className="box1" onClick={this.handleClickOne}>
1
  • 传递参数有两种写法：
      1. 箭头函数：<div className="box2" onClick={e => this.handleClickTwo(e)}
      1. bind 方法：<div className="box2" onClick={this.handleClickTwo.bind(this, e, others)}

# 事件重用

Event Pooling：事件池

react 中的事件会被重用，每一次事件对应的回调函数执行后事件上的所有属性都会失效。

比如通过 setTimeout 异步方式访问事件会报错。

此时的解决方法是调用 persist() 方法移出事件池从而保留事件对象。

# 事件处理函数的执行时机

事件处理函数都是在冒泡阶段执行，如果要让事件处理函数在捕获阶段执行，事件名后面加 Capture 就行。

    onClick  ==> onClickCapture
1

# React 中阻止事件冒泡的三种方式

合成事件中的 currentTarget 指向当前 dom 元素，但是 nativeEvent 的 currentTarget 指向 document

  • 阻止合成事件间的冒泡，用e.stopPropagation();
  • 阻止合成事件与最外层 document 上的事件间的冒泡
    // nativeEvent 的 currentTarget 指向 document
    e.nativeEvent.stopImmediatePropagation();
1
2
  • 阻止合成事件与 除最外层document上的原生事件 上的冒泡，通过判断 e.target 来避免
    document.body.addEventListener('click',e=>{
        // 通过e.target判断阻止冒泡
        if(e.target&&e.target.matches('a')){
            return;
        }
        console.log('body');
    })
1
2
3
4
5
6
7

# 自定义 dom 事件

使用到的事件对象有 Event 和 CustomEvent

  • 自定义事件和触发事件：
// 通过 Event 创建新的事件
const event = new Event('newEvent');

box1.addEventListener('newEvent', function() {
    console.log('newEvent 事件被触发了！！！！')
});

setTimeout(function() {
    // 通过调用元素的 dispatchEvent 方法在该元素上面触发该事件
    box1.dispatchEvent(event);
}, 2000);
1
2
3
4
5
6
7
8
9
10
11
  • 自定义事件的时候，为事件对象添加数据：
const customEvent = new CustomEvent('customEvent', { 'data': '2121212' });
box1.addEventListener('customEvent', function(e) {
    console.log('customEvent 事件被触发了！！！！', e, customEvent)
});
setTimeout(function() {
    box1.dispatchEvent(customEvent);
}, 2000);
1
2
3
4
5
6
7
8

# 代码控制触发内置事件

box1.addEventListener('click', function(e) {
    console.log('代码控制触发内置事件', e)
});

setTimeout(function() {
    const click = new MouseEvent('click')
    box1.dispatchEvent(click)
}, 2000)
1
2
3
4
5
6
7
8
9

# 更新

返回顶部

# 16-9-0

  • 添加 <React.Profiler>API，用于以编程方式收集<React.Profiler>的度量
render(
 <Profiler id="application" onRender={onRenderCallback}>
 <App>
 <Navigation {...props} />
 <Main {...props} />
  </App>
 </Profiler>
);
1
2
3
4
5
6
7
8
  • 删除 unstable_ConcurrentMode，选择 unstable_createRoot
  • React DOM重命名不安全生命周期方法
  1. componentWillMount → UNSAFE_componentWillMount
  2. componentWillReceiveProps → UNSAFE_componentWillReceiveProps
  3. componentWillUpdate → UNSAFE_componentWillUpdate

但是，当使用任何旧名称时，您将看到一个警告：运行一个自动重命名它们的“codemod”脚本：

cd your_project
npx react-codemod rename-unsafe-lifecycles
1
2
  • 移除不常见的“模块模式”(工厂)组件
  • 在<video>上添加对 disablePictureInPicture 属性的支持
  • 为 <embed> 添加对 onload 事件的支持
  • 从 DevTools 添加对编辑 useState 状态的支持
  • 从 useEffect 调用 setState 时发出警告
  • 修复内存泄漏
  • 修复 findDOMNode 内部的崩溃，用于封装在 <Suspense> 中的组件
  • 修复警告消息中不正确的参数顺序
  • React DOM Server

修复 CamelCase 自定义 CSS 属性名称的错误输出

  • React Test Utilities 和 Test Renderer

添加 act(async () => ...) 用于测试异步状态更新
从不同的渲染器中添加对 act 的支持

# 组件库

返回顶部

# ant-design

# SHINEOUT

GitHub | 文档

SHINEOUT

依据文档介绍，SHINEOUT是一个更加轻量、更加快速的React组件库，
在日常的中后端系统中，表格往往扮演着加载展示数据的角色，但同时，当数据量大的时候，可能会遇到性能瓶颈，界面往往会卡顿，
一般情况下我们可以使用虚拟加载技术，在之前文章中也介绍过，但有时候可能会有一定的局限性。
而SHINEOUT可能会给你提供一个更加优秀的解决方案，提供简单实用的表格组件，性能优秀自适应等。

# 部署

# 用Spring Boot打包你的React应用

# 学习实例

# react实例-我的服务菜单（含一些基本介绍）

# ant-design学习

react1.jpg