react文章/教程

React是用于构建用户界面的JavaScript库, [2] 起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

记一次react-hooks项目获取图表图片集合并生成pdf的需求

需求: 获取子组件中所有图片的dom元素并生成图片,再把生成的图片转化为pdf下载 难点 众所周知,react是单向数据流,倡导f(data)⇒ UI的哲学, 并不建议过多直接操作dom,但是生成图片的base64格式时使用的ant design charts 要求必须获取ref才可以 逻辑流转如下 ... »

web-zs React

React router的Route应用

p.p1 { margin: 0; font: 12px ".PingFang SC" } span.s1 { font: 12px "Helvetica Neue" } p.p1 { margin: 0; font: 12px "Helvetica Neue" } p.p2 { margin: 0; font: 12px ".PingFang SC" } p.p3 { margin: 0; fo »

解决react跨域的两种代理配置

react两种代理配置 在项目文件夹中按以下路径找到devServer.js文件。进行代理配置 node_modules>react-scripts>config>devServer.js proxy:{ "/api":{ target:"http://47.96.0.221:9000", changeO »

在react项目中使用回车键(Enter)实现tab切换输入框的功能(以及Don't make functions within a loop no-loop-func的问题)

  在这碰到的一个问题就是代码在正常的HTML文件中是没有什么问题的,但是当代码放到react项目中就会报警告Don't make functions within a loop  no-loop-func(其实大致的意思就是说不要在循环中生成或嵌套函数),可能是严格模式的原因。实现方式只需要需要添加这个效果的输入框加上一个class名‘input‘,这边使用过获取所有需要这个功能的输入框进行循环 »

react之路: react过渡动画(react-transition-group)

github仓库地址:https://github.com/wanghao12345/react-book 这里主要讲解使用react-transition-group里面的CSSTransition实现动画。 使用CSSTransition实现动画,一共分三步: 1.引用CSSTransition   1 import { CSSTransition } from 'react-transiti »

React Native - 5 ListView实现图文混排

首先在根目录下建一个images文件夹,准备好图片 准备datasource 准备图片资源 准备renderRow方法   记得要import相应的类,ListView, Image, TouchableOpacity等等   结果如下:   »

es6中react的单选和全选

             swSelectAll(){         var selectAll = !this.state.selectall;         var newClas-s-roomList = this.state.clas-s-roomList.slice();         newClas-s-roomList.map((item)=>{             ite »

react的50个面试题

1. 区分Real DOM和Virtual DOM Real DOM Virtual DOM 1. 更新缓慢。 1. 更新更快。 2. 可以直接更新 HTML。 2. 无法直接更新 HTML。 3. 如果元素更新,则创建新DOM。 3. 如果元素更新,则更新 JSX 。 4. DOM操作代价很高。 4. DOM 操作非常简单。 5. 消耗的内存较多。 5. 很少的内存消 »

React Native & iframe & WebView

React Native 怎么渲染 iframe 页面 WebView & source html https://facebook.github.io/react-native/docs/webview#sourcehttps://facebook.github.io/react-native/docs/webview.html#html // old import { WebVie »

如何优雅的在react-hook中进行网络请求

此文转载自:https://my.oschina.net/wayne90214/blog/4651993 本文将介绍如何在使用React Hook进行网络请求及注意事项。 前言 Hook是在React 16.8.0版本中新加入的特性,同时在React-Native的0.59.0版本及以上进行了支持,使用hook可以不用class的方式的方式使用state,及类似的生命周期特性。 本片文章通过 »

react16 路由按需加载、路由权限配置

 1. 路由按需加载:   不做按需加载,代码全部打包在bundle.js 文件里,首屏渲染很慢,项目文件较多,会出现1分钟加载的可能性。    import React, { Component } from 'react'; import Loadable from 'react-loadable'; // 按需加载依赖包 import {HashRouter,Route,Switch »

4.前端基于react,后端基于.net core2.0的开发之路(4) 前端打包,编译,路由,模型,服务

1.简要的介绍 学习react,首先学习的就是javascript,然后ES6,接着是jsx,通常来说如果有javascript的基础,上手非常快,但是真正要搭建一个前端工程化项目,还是有很多坑的 搞定上面的东西,那么去了解一下Virtual DOM,可以让你更快的了解react 状态管理和路由都是基于dva(dva基于react-router,redux),所以就按照dva的命名和规则来玩。建议 »

react plugins 配置需要注意的

一下只是举个例子, 如果你需要配置两个插件,有类似这样的代码在babelrc: { "plugins": [ ["import", { "libraryName": "antd", "style": "css" }], ["import", { "libraryName": "antd-mobil »

React中函数组件和类组件的区别

定义组件有两个要求: 组件名称必须以大写字母开头 组件的返回值只能有一个根元素      函数组件:   function Welcome (props) { return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='react' />, document.getEleme »

shouldComponentUpdate 的作用--react性能优化

shouldComponentUpdate 的作用 在一个组件的子树中,每个节点中,SCU 代表 shouldComponentUpdate 返回的值,而 vDOMEq 代表返回的 React 元素是否相同。最后,圆圈的颜色代表了该组件是否需要被调停。 节点 C2 的 shouldComponentUpdate 返回了 false,React 因而不会去渲染 C2,也因此 C4 和 C5 的 sh »

解决在react中使用高德地图报错:Can't resolve 'AMap' in ...

问题:     报错原因: 因为eslint代码检查报错,所以在编译的时候会出现这个错误。   解决办法: 在开发环境中忽略对AMap的代码检查, 找到node_modules    react-scripts  config   webpack.config.js 加入 entry ... externals: {   'BMap': 'BMap',   ' »

基于react+react-router+redux+socket.io+koa开发一个聊天室

最近练手开发了一个项目,是一个聊天室应用。项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和技巧在开发的过程中都有所涉及,非常有必要再来巩固一下。 项目目前部署在heroku平台上,在线演示地址: online demo, 因为是国外的平台速度可能有点慢,点进去耐心等一会儿就能加载好了。 加 »

React useEffect

今早来又莫名其妙的遇到了 bug,排查了一下是 useEffect 导致的。今天就再来详细的学习一下 react useEffect。 为什么要? 我们知道,react 的函数组件里面没有生命周期的,也没有 state,没有 state 可以用 useState 来替代,那么生命周期呢? useEffect 是 react v16.8 新引入的特性。我们可以把 useEffect hook »