REACT - 技术教程文章
Typescript 中如何使用react ref【代码】
正常在jsx中写法如下： class Header extends Component<any>{myInputRef = React.createRef();render(){return(<div><input type="text" ref={this.myInputRef}/></div>)} } 但是在tsx中由于类型检查，会编译报错： Type RefObject<unknown> is not assignable to type string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined. Type RefObject<unknown> is not assignable to...
React学习笔记——类中的方法内部的this指向【代码】【图】
类中的方法内部的this指向 在用react实现一个点击切换内容小demo时的，发现类中方法内部的this是指向undefined的。 代码如下： <div id="test"></div><script type="text/javascript" src="../JS/react.development.js"></script><script type="text/javascript" src="../JS/react-dom.development.js"></script><script type="text/javascript" src="../JS/babel.min.js"></script><script type="text/babel">class Weather exte...
Reactive Spring实战 -- 理解Reactor的设计与实现【代码】
转： Reactive Spring实战 -- 理解Reactor的设计与实现 Reactor是Spring提供的非阻塞式响应式编程框架，实现了Reactive Streams规范。 它提供了可组合的异步序列API，例如Flux（用于[N]个元素）和Mono（用于[0 | 1]个元素）。 Reactor Netty项目还支持非阻塞式网络通信，非常适用于微服务架构，为HTTP（包括Websockets），TCP和UDP提供了响应式编程基础。 本文通过例子展示和源码阅读，分析Reactor中核心设计与实现机制。 文本Reac...
React 之 大纲学习目录
第一天: 1)虚拟DOM的两种创建方式 函数组件 和 类组件 2)jsx语法规则 3)react 如何定义组件 通过完整的类组件的写法,还有简写形式 4)组件实例三大属性1_state 1.理解类中this的指向问题 2.理解简写形式 3.不能直接修改state,而是通过setState来修改 4.构造器绑定事件处理函数及简写形式 5)组件实例三大属性2_props 1.构造器中和super中写不写props的情况 2.props可以设置数据类型限制和默认值 (注...
webstorm常用快捷键和react项目的快捷键
代码标签输入完成后，按Tab，生成代码。 ctrl + a - - 选择全部 ctrl + b - - 跳到变量申明处,快速打开光标处的类或方法 ctrl + c - - 复制 ctrl + d - - 如果选择了文本那么就是向此行的末尾复制，如果没有选中文本那就是将此行向下复制 ctrl + e - - 弹出最近打开文件列表，可以快速选择最近曾经打开的文件。 ctrl + f - - 在所在的文件内查文本 ctrl + g - - 跳转至指定行指定列（列可以不填） ctrl + h - - 显示类结构图(如果没...
React学习第二篇——组件【代码】
非自定义组件 1、我们可以使用函数定义了一个组件： function HelloMessage(props) {return <h1>Hello World!</h1>; }2、你也可以使用 ES6 class 来定义一个组件: class Welcome extends React.Component {render() {return <h1>Hello World!</h1>;} }自定义组件 const element = **<HelloMessage />** 注意** 自定义组件作为标签引用时候首字母都是大写的 组件传值 对比记忆：在vue里面父组件给子组件传值也是用props传值。 //子组...
React create-react-app创建项目时,控制台爆出这个错误
今天在安装react脚手架模板项目的时候出现错误如下 A template was not provided. This is likely because youre using an outdated version of create-react-app.Please note that global installs of create-react-app are no longer supported.You can fix this by running npm uninstall -g create-react-app or yarn global remove create-react-app before using create-react-app again. 但是我尝试了几次卸载依然不能成功...
React 函数式组件性能优化
一 函数式组件新能优化：https://mp.weixin.qq.com/s?__biz=MzI1ODk2Mjk0Nw==&mid=2247484774&idx=1&sn=9dc58e54a28755504d58bef49a78f3b4&scene=21#wechat_redirect React 性能优化的理念的主要方向就是这两个：减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都...
React中less无法使用，less如何配置（暴力简单）【代码】
首先大家明白一点React中默认是配置Sass的，所以想要配置Less的话看下面： 1.有一些第三方的框架会默认配置less 例如： a:umi.js （蚂蚁金服前端框架）按照该框架官方文档引入即可 2.手动配置Less即可 a.首先先创建一个初始的React-app。此时，就算import less也无法应用，因为React提供的脚手架为creact-react-app默认配置sass。 b.接下来，就是固定的npm安装less npm install less less-loader --save c.在创建好的项目文件夹中找...
React-Native中Navigator浅析【代码】
Navigator组件的属性**1.configureScene**该属性指定的回调函数被执行时，会收到一个导航路径参数，开发者可以根据导航路径中的各信息来决定场景切换使用的效果。可能值：PushFromRightPushFromLeftFloatFromRightFloatFromLeftFloatFromBottomFloatFromBottomAndroidFadeAndroidHorizontalSwipeJumpHorizontalSwipeJumpFromLeftVerticalUpSwipeJumpVerticalDownSwipeJump也可以自定义动画，自定义动画参考：http://yj1438.github....
(2)react环境搭建【代码】【图】
使用套件搭建 ? 基本不用了。 手动引入几个库。使用 create-react-app构建react开发环境 ? 脚手架 搭建，一行命令即可。（第一次构建事件较长） （1）安装webpack-react-app npm install -g create-react-app（2）使用该命令创建项目目录 create-react-app my-app注：不能包含大写字母 （3）切换到项目目录 cd my-app（4）运行项目 npm start运行后自动打开浏览器，默认运行在3000端口 手动搭建 （1）首先搭建webpack环境 此处不再...
（1）初识 React【图】
什么是Reactreact是用于构建用户界面的JavaScript框架 是一个将数据渲染为html视图的开源JavaScript库（主要用于操作dom呈现界面） 由facebook开发，开源 起初由facebook的软件开发工程师创建，2012年部署在Instagram，2013年宣布开源为什么学React 因为原生js有一些固有缺点： （1）原生js操作dom繁琐，效率低（Dom-api操作ui） （2）使用js直接操作dom，浏览器会进行大量重绘重排 （3）原生js没有组件化的编程方案，是嘛复用率低...
React基础笔记2【代码】【图】
一、生命周期函数 挂载卸载过程 constructor props context componentWillMount 服务器与客户端 componentDidMount ajax请求 componentWillUnmount 清除动画 更新过程 componentwillRecieveUpdata(nextProps) shouldComponentwillupdata(nextProps,nextState) 组件渲染监听 componentDidupdata() componentWillupdata render 更新组建 二、网络请求与反向代理 1、网络请求下载: n...
珠峰基于Vue/React打造企业级技术及行业解决方案【图】
摘要： 神奇的JS系列。作者：前端小智 原文：8个问题看你是否真的懂 JSFundebug经授权转载，版权归原作者所有。 JavaScript 是一种有趣的语言，我们都喜欢它，因为它的性质。浏览器是JavaScript的主要运行的地方，两者在我们的服务中协同工作。JS有一些概念，人们往往会对它掉以轻心，有时可能会忽略不计。原型、闭包和事件循环等概念仍然是大多数JS开发人员绕道而行的晦涩领域之一。正如我们所知，无知是一件危险的事情，它可能会...
2021-04-04 - React Native - 学习/实践【图】
1.应用场景 主要用于使用react native开发跨平台App 2.学习/操作这里开发环境： Mac pro 2019 1.文档阅读 https://www.jianshu.com/p/c288f0a246ae // 如何开发一个适配Android和iOS双平台的React Native应用 https://reactnative.cn/docs/intro-react-native-components // react native 中文网 https://github.com/search?q=react+native+video // react native video https://github.com/react-native-video/react-native-v...
《React：引领未来的用户界面开发框架》读书记录 05
今天阅读的部门是React中的生命周期部分getDefaultProps 在目前的class ... extends 组件中不被支持，只能在createClass使用，作用是给组件提供默认的props getInitialState 与getDefaultProps 差不多，只不过这个是初始化state用的 componentWillMount 在组件完成首次渲染前被调用，这也是在render方法被调用前修改state的最后一次机会(不过官方应该已经不推荐使用了) render 渲染方法，具体介绍如下:在render中不能改变组件的状...
react-hooks初探：useEffect入门使用场景【代码】
react-hooks初探：useEffect使用场景 常用场景：useEffect基本构造：常用场景： 全局任意变量变动均可触发 useEffect(() => {//不加参数时 === 在任意生命周期中可执行//这里可以处理一些全局变量的变化，例如lodaing状态的设置 })在组件销毁时触发 useEffect(() => {//这里可以做一些希望在组件销毁时要做的处理，比如重置数据 }, [])在特定变量发生变化时才会触发 useEffect(() => {//在paramA发生变化时希望做的下一步操作 }, [...
React应该如何优雅的绑定事件？【代码】【图】
React应该如何优雅的绑定事件？ 二哲 web前端开发 前言 由于JS的灵活性，我们在React中其实有很多种绑定事件的方式，然而，其实有许多我们常见的事件绑定，其实并不是高效的。 所以本文想给大家介绍一下React绑定事件的正确知识。 以下是我们常见的两种种错误绑定事件class ErrorExample1 extends Component {balabala(e) {console.log(e)}render() { const { text } = this.state; return ( <Wrapper>{t...
react组件引用本地图片并进行标记 生成csv本地文件【代码】【图】
引用 我最近在使用react写网页，有一个需求是：在前端读取本地的图片文件，在react组件中显示，并且对图片文件进行标记。标记的结果存在本地csv文件中。 因为只是本地读取，本地存储，所以整个流程都不涉及与后端交互，纯前端就可以完成。 效果实现 下面的实现只是思路以及核心代码，全部代码可移步Github。 为了使得标记可以自行修改，所以我把图片当作div的背景图片显示。标记当作div的p元素。render()函数很简单：render(){retu...
基于react hooks,zarm组件库配置开发h5表单页面【代码】
最近使用React Hooks结合zarm组件库，基于js对象配置方式开发了大量的h5表单页面。大家都知道h5表单功能无非就是表单数据的收集，验证，提交，回显编辑，通常排列方式也是自上向下一行一列的方式显示 ， 所以一开始就考虑封装一个配置化的页面生成方案，目前已经有多个项目基于此方式配置开发上线，思路和实现分享一下。 使用场景 任意包含表单的h5页面（使用zarm库，或自行适配自己的库） 目标代码实现简单和简洁 基于配置 新手上...
React Native的桥接（Bridge）—— 深入了解React Native核心原理【代码】【图】
原文：https://tadeuzagallo.com/blog/react-native-bridge/ 在这篇文章之前我们假设你已经了解了React Native的基础知识，我们会重点关注当native和JavaScript进行信息交流时的内部运行原理。 主线程 在开始之前，我们需要知道在React Native中有三个主要的线程：shadow queue：负责布局工作 main thread：UIKit 在这个线程工作（译者注：UI Manager线程，可以看成主线程，主要负责页面交互和控件绘制的逻辑） JavaScript threa...
react-native设计之使用图片【代码】
文档：https://reactnative.cn/docs/images 1.静态图片 React Native 提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它： <Image source={require('./my-icon.png')} />一些老文章和教程提到的require('image!xxx')的写法已经从 0.40 版本开始不再支持！ 图片文件的查找会和 JS 模块的查找方式一样。如果你有my-icon.ios....
react-native设计之使用Flexbox布局
文档：https://reactnative.cn/docs/flexbox 1.简介 我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。 一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。 React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。 首先是默认值不同：flexDirection的默认值是column而...
Vue 转 React 指南，看这篇文章就够了
为什么要从 Vue 转到 React，这篇文章为什么我们放弃了 Vue？Vue 和 React 深度对比大家可以看看，文章写得很详细，不过对于大多数人来说，用 Vue 还是 React 不是自己说了算，多学一门技术不是坏处，而且 React 被大厂大量使用，要进入大厂也是必备的技能，笔者原先使用 Vue，由于 React 相关概念更加简单，只要会 js 就行，转到 React 只花了几天时间（已经回不去了～）。本文写给想从 Vue 转到 React 的同学，假设读者有一定的 ...
react withRouter和connect 同时使用的案例【代码】
在react中，如果遇到redux的connect 和 一般组件跳转的withRouter 同时使用... import React from react; import {connect} from react-redux import { withRouter } from "react-router-dom";class MyHeader extends Component {}const mapStateToProps=(state)=>{return {} };const mapDispatchToProps = (dispatch) => {return {}; }; //连环嵌套 export default connect(mapStateToProps, mapDispatchToProps)(withRouter(MyH...
react学习笔记-从井字棋开始(1)【代码】
教程地址 https://react.docschina.org/tutorial/tutorial.html 新建工程 1.确保你安装了较新版本的 Node.js。 2.按照 Create React App 安装指南创建一个新的项目 npx create-react-app my-app 3.删除掉新项目中 src/ 文件夹下的所有文件。 4.在 src/ 文件夹中创建一个名为 index.css 的文件，并拷贝这些 CSS 代码。 5.在 src/ 文件夹下创建一个名为 index.js 的文件，并拷贝这些 JS 代码。 6.拷贝以下三行代码到 src/ 文件夹下的...
React 学习笔记 —— refs 属性【代码】
字符串 ref 注意：过度使用字符串ref 会存在效率问题，该方式可能会在未来的版本中移除 class Demo extends React.Component {handleChange = () => {// 可以通过 refs 访问到被引用的标签this.refs.p.innerText = this.refs.input.value}render () {return (<div>// 通过 ref 对标签进行引用<input ref="input" type="text" onChange={this.handleChange}/><p ref="p"></p></div>)} }ReactDOM.render(<Demo />, document.getEleme...
React-native 开发问题汇总
1. 入门网站 https://reactnative.dev/docs/getting-started https://reactnative.cn/docs/getting-started 2. 更换npm国内源 a、临时使用 npm --registry https://registry.npm.taobao.org install express b、持久使用 npm config set registry https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global // 配置后可...
React-性能优化(一)【代码】
文章目录 一、使用React.Memo来缓存组件二、使用useMemo缓存大量的计算三、避免使用内联对象四、避免使用匿名函数五、延迟加载不是立即需要的组件六、调整CSS而不是强制组件加载和卸载七、使用React.Fragment避免添加额外的DOM八、基于 shouldComponentUpdate 优化九、基于 PureComponent + immutable.js 优化React 好像就意味着组件化、高性能，我们永远只需要关心数据整体，两次数据之间的 UI 如何变化，则完全交给 Virtual Dom ...
React项目开发过程中需要注意避免re-render——性能优化方案【代码】
前言： 全是干货！！答应我一定要每字每句，包括代码注释都认认真真看好吗！！都是重点呀~~~ —————————————————————————————————————— 首先我们要知道哪些方法会触发react组件的重新渲染？ 1、setState方法被调用（hook中是 useState中的setXXXX方法被调用）组件就会触发render，除了设置state为null的情况不会触发render。 注意注意！！上面说的是方法被调用就会re-render，而不指的是stat...