react
关注
分享
扫一扫
lxhguard
腾讯前端
展开
-
react源码学习之工具babel
百度babel,打开网站，top上的试一试（try it）https://www.babeljs.cn/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwEwlgbgfMD07SA&debug=false&forc...原创 2019-12-10 15:36:15 · 187 阅读 · 0 评论 -
react入门
react16之前采用diff算法，之后采用fiber算法。原因：js单线程，前：每个组件都是同步渲染，一个组件渲染完成才渲染下一个。防止 渲染很慢很慢，所以升级成fiber.fiber变为异步的，渲染又分为优先级高低，高的先渲染，低的后渲染。特点：虚拟dom，组件化，jsx，PS： vue也有jsx，但是不明显。版本：16,16.3,16.816写法发生变化...原创 2019-11-21 09:40:48 · 124 阅读 · 0 评论 -
react兄弟组件传递数据
通过发布/订阅进行传递在子组件A中 commentDidMount函数中，发布事件，在子组件B中commentDidMount函数中对事件进行监听import {EventEmitter} from 'events';const emitter = new EventEitter();class A extends React.Component { clickHandle...原创 2019-10-16 18:07:35 · 1187 阅读 · 0 评论 -
react遇到一个问题，不知道为什么this.state存不进去ref的value
import React, { Component } from 'react';import './index.css'class Register extends Component { constructor(props) { super(props); this.state = { user_password: "", user_emai...原创 2019-04-18 17:49:52 · 745 阅读 · 0 评论 -
react 中axios的引用方法
一。在组件中引用组件import React, { Component } from 'react';import './index.css';import axios from 'axios';class Login extends Component { constructor(props) { super(props); } //当组件输出到 DOM 后...原创 2019-04-18 15:50:06 · 3642 阅读 · 0 评论 -
cd anaconda3/,bin/jupyter-notebook
cd anaconda3/bin/jupyter-notebook原创 2019-04-17 23:22:45 · 270 阅读 · 0 评论 -
react中如何做到css样式私有
提问原因：在一个.css文件中的header类设置颜色为黑色，页面效果却是红色。发现在app.css中设置header类的color:red;提问：如何私有css？（在vue中通过scoped使得css样式变为私有）解决：一。根本办法：用css module完全可以做，在create-react-app中使用css modules这里又分为两种方式：一种引入，一种修改配置（...原创 2019-04-14 21:30:38 · 7649 阅读 · 1 评论 -
react 让虚拟dom单页app占满屏幕的两种方式
index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta nam...原创 2019-04-14 21:03:59 · 666 阅读 · 0 评论 -
react异步数据如ajax请求应该放在哪个生命周期？
对于同步的状态改变，是可以放在componentWillMount，对于异步的，最好好放在componentDidMount。但如果此时有若干细节需要处理，比如你的组件需要渲染子组件，而且子组件取决于父组件的某个属性，那么在子组件的componentDidMount中进行处理会有问题：因为此时父组件中对应的属性可能还没有完整获取，因此就让其在子组件的componentDidUpdate中处理。...原创 2019-04-14 11:59:30 · 1344 阅读 · 0 评论 -
react无状态组件
一个普通组件只有render函数的时候，我们完全可以通过一个无状态组件来替换掉这个普通组件。无状态组件相对于这个普通函数的优势如下：无状态组件的性能比较高。因为无状态组件就是一个函数。而普通组件是js里面的一个类，而这个类生成的对象里还有生命周期函数，他执行起来既要执行生命周期函数，还要执行render，性能是一定比不上无状态组件的。普通组件如下...原创 2019-05-18 10:21:27 · 410 阅读 · 0 评论 -
redux中发送异步请求获取数据
react axios访问本地json文件解决方法：必须将json文件放到public文件夹下即可访问(一)使用axios://这个算是redux进阶的Demoimport React, { Component } from "react";import store from "../../store";import { getInputChangeValue,...原创 2019-05-18 10:56:46 · 3547 阅读 · 0 评论 -
使用redux-thunk中间件实现ajax数据请求
上片文章，如果把一些复杂逻辑或者异步请求，放在同一个组件中，会显得冗长和难以管理。我们可以使用react-thunk这个中间件进行管理。可以把逻辑放在action中优势：自动化测试特别方便首先，学会使用：redux-thunkInstallationnpm install redux-thunkThen, to enable Redux Thu...原创 2019-05-18 12:27:54 · 449 阅读 · 0 评论 -
到底什么是redux中间件
redux中间件指的是action和store之间。即dispatch的封装和升级。redux-thunk：采用把异步方式放到action中去操作，还有一个中间件叫做redux-saga，单独的把逻辑放到另一个文件中进行管理...原创 2019-05-18 13:59:51 · 699 阅读 · 0 评论 -
发现一个bug,react，事件绑定会删除你希望删除目标的上一个
//这是UI组件，只负责渲染页面，不负责逻辑处理import React, { Component } from 'react';import "antd/dist/antd.css";import { Input, Button, List, Typography, Tag } from "antd";const ToDoListUI = (props) => { ret...原创 2019-05-18 14:16:30 · 486 阅读 · 2 评论 -
redux-saga中间件的使用
异步处理两种方式：redux-thunk,redux-saga(适用于特别大型的项目)先展示redux-thunk:todulist.js//这个算是redux进阶的Demoimport React, { Component } from "react";import store from "../../store";import { getInputChangeVal...原创 2019-05-18 14:59:48 · 1020 阅读 · 0 评论 -
react-redux的使用
我电脑有问题，或者是有一些别的问题，程序在我电脑上有错误。react-redux可以成功安装，但是引用Provider标签就报错。import React, { Component } from 'react';import { Provider } from "react-redux";import store from '../ListStore'import Dire...原创 2019-05-18 16:49:34 · 141 阅读 · 0 评论 -
setState为什么是异步更新
1.）setState操作是异步的，并且为了性能提升而进行批处理。这在setState的文档中有解释。setState（）不会立即改变this.state，但会创建挂起状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState的调用进行同步操作，并且可以对调用进行批处理以提高性能。2.）为什么它们会使setState异步，因为JS是单线程语言，并且此s...原创 2019-08-02 23:34:49 · 3646 阅读 · 0 评论 -
create-react-app脚手架如何引入public下的css
引入src文件夹外的css样式报错：Relative imports outside of src/ are not supported.解决办法：1，项目直接eject命令，如果之前执行过了产生了webpack等文件就不用再执行。 2，将webpack.config.js中ModuleScopePlugin命令注释掉即可。//n...原创 2019-04-14 00:28:06 · 2841 阅读 · 0 评论 -
react input输入值进行绑定
import React, { Component } from 'react'import '../App.css'//A其实就是一个简单的高阶组件export default (title) => WrappedComponent => class A extends Component { refc(instance) {//instance指的是Wrapp...原创 2019-04-13 22:02:04 · 3172 阅读 · 0 评论 -
react:npm run eject报错：Remove untracked files, stash or commit any changes, and try again.
Remove untracked files, stash or commit any changes, and try again.原因：你有改动项目的其他内容之后 再尝试eject就会这样解决：先git add .然后git commit -m "init"然后再npm run eject...原创 2019-04-13 17:50:08 · 885 阅读 · 0 评论 -
react踩坑之React.PropTypes已经被废弃
修改后的方法//测试效果用import React, { Component } from 'react';import PropTypes from 'prop-types';class Test extends Component { render(){ return <h2>{this.props.title}</h2>...原创 2019-04-10 13:25:08 · 2703 阅读 · 2 评论 -
react可控组件和不可控组件
在React中的input标签是有些小坑的，input本身就有自己的缓存机制，然后React的State也有缓存机制。这两种缓存机制我们在编码中是要进行取舍的。将input中的value绑定到state的React组件就是可控组件，反之则是不可控组件。先看一个不可控的input代码//测试效果用import React, { Component } from 'react';cla...原创 2019-04-10 15:42:54 · 1306 阅读 · 0 评论 -
react axios访问本地json文件
解决方法：必须将json文件放到public文件夹下即可访问原创 2019-04-12 11:44:20 · 3390 阅读 · 0 评论 -
Objects are not valid as a React child (found: object with keys {id, src, title}). If you meant to r
这种错误说明你在html中输出了一个对象原创 2019-04-12 17:02:00 · 12773 阅读 · 1 评论 -
react引用图片问题
(问题：引入图片): ./代表的含义是http://localhost:3000/,即是代表根目录下的public目录下。我的图片样式正确，路径正确，可是加载不出来。这又几种方法正确引入图片：（1）。已经路径的图片，路径中不含有变量，用如下方法：（就算是同级目录下，也要加上./，不然会报错）注意：require中只能放字符串，不能放变量create-react...原创 2019-04-12 17:47:00 · 3118 阅读 · 0 评论 -
target，currentTarget和this三者的区别
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象(注册该事件的对象)（一般为父级）。this指向永远和currentTarget指向一致（只考虑this的普通函数调用）。点击第...原创 2019-04-12 17:58:14 · 217 阅读 · 0 评论 -
react定义组件的方法有哪些？
1.函数式无状态组件2.es5方式React.createClass组件3.es6方式extendsReact.Component1.函数式无状态组件 语法:function HelloComponent(props){return <div> Hello {props.name}</div>}...原创 2019-04-12 18:49:09 · 1516 阅读 · 0 评论 -
React.Fragment
React.Fragment官方文档：React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。Fragments 看起来像空的 JSX 标签：render() { return ( <> <ChildA /> <ChildB /> ...原创 2019-04-16 00:29:03 · 647 阅读 · 0 评论 -
react的props必须像纯函数那样使用他们的组件
react的props必须像纯函数那样使用他们的组件纯函数:function sum(a,b){return a + b;}非纯函数:function sum2(a,b){a = a + b;return a;}原创 2019-04-16 09:21:17 · 618 阅读 · 0 评论 -
react生命周期
原创 2019-04-16 09:47:08 · 144 阅读 · 0 评论 -
react受控组件改写为非受控组件
受控import React, { Component } from 'react';class CommentBox extends Component { constructor(props) { super(props); this.state = { value: "" }; this.handleChange = this.han...原创 2019-04-16 11:15:04 · 521 阅读 · 0 评论 -
模拟数据--菜品
const data = [ { id:1, shop:"院落创意菜", picture:"http://img1.imgtn.bdimg.com/it/u=2440095791,1511299106&fm=26&gp=0.jpg", product:"百香果（冷饮）1扎", price:19...原创 2019-04-12 22:17:30 · 457 阅读 · 0 评论 -
vscode无法保存，新建文件
google上搜索了一下，说是当前文件夹被写入了root权限，所以用普通用户无法编辑，只要将当前文件夹的权限改变一下即可sudo chown -R $USER <directory_project>根目录创建.env写入SKIP_PREFLIGHT_CHECK=true可以解决react报错说webpack版本不一致的错误...原创 2019-04-09 23:16:38 · 8929 阅读 · 1 评论 -
react学习笔记
一、HTML 模板最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel"react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核...原创 2019-04-09 23:17:26 · 116 阅读 · 0 评论 -
react学习之路
注意：react用ant-design,vue用element-ui1.创建react项目： npx create-react-app <项目名> 启动项目：cd <项目名> npm start2.解读package.json： dependencies: 指定项目运行所依赖的模块，即：开发版和发布版都需要的依赖。 ...原创 2019-04-09 23:18:00 · 365 阅读 · 0 评论 -
mac重新卸载安装node
原创 2019-04-10 09:20:10 · 1308 阅读 · 0 评论 -
react学习笔记
propslet HelloBox=React.createClass({ render:function(){ return <div>{'Hello '+this.props.myattr}</div>; } }) ReactDOM.render(<HelloBox myattr="world"/>,document.getElementByI...原创 2019-04-10 13:22:11 · 111 阅读 · 0 评论