weixin_40222803的博客

React 是什么？React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。 状态提升当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。 受控组件子组件 不再拥有自身的状态数据了，从福罪案接受数据并将数据要改变的事件通...

函数式编程——入门笔记与React实践最近在看近来很火的函数式编程教程《Mostly Adequate Guide》 （中文版：《JS函数式编程指南》），收获很大。对于函数式编程的初学者，这本书不仅深入浅出，更让人感受到函数式编程的优势和美感，强烈推荐给想要学习函数式编程的朋友。这篇文章是我个人的一个学习笔记，在总结知识的同时，也尝试以React组件的输入事件响应为例，用函数式编程去应对实...

react diff算法浅析深度剖析：如何实现一个 Virtual DOM 算法理解 Virtual DOM  认真看上面两个 博文 diff算法作为Virtual DOM的加速器，其算法的改进优化是React整个界面渲染的基础和性能的保障，同时也是React源码中最神秘的，最不可思议的部分1.传统diff算法计算一棵树形结构转换为另一棵树形结构需要最少步骤，如果使用...

class Card extends React.Component { constructor(props) { super(props); this.state = { width: props.width || -1, height: props.height || -1, } } componentDidMount() { ...

const webpackConfig = require('./creams.config.js');const aliasList = webpackConfig.alias;delete aliasList['@'];const moduleNameMapperConfig = { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|w...

组件的私有方法都用 _ 开头，所有事件监听的方法都用 handle 开头。把事件监听方法传给组件的时候，属性名用 on 开头组件的内容编写顺序如下：static 开头的类属性，如 defaultProps、propTypes。构造函数，constructor。getter/setter（还不了解的同学可以暂时忽略）。组件生命周期。_ 开头的私有方法。事件监听方法，handle*。...

 原文地址前言本文代码浅显易懂，思想深入实用。此属于react进阶用法，如果你还不了解react，建议从文档开始看起。我们都知道高阶函数是什么, 高阶组件其实是差不多的用法，只不过传入的参数变成了react组件，并返回一个新的组件.A higher-order component is a function that takes a component and retur...

添加了几个复杂场景的demo，增加了单元测试很实用 贴切场景

以前你在父组件中使用<component ref="component"/>的时候，你可以直接通过this.refs.component进行获取。但是因为这里的component经过HOC的封装，已经是HOC里面的那个component了，所以你无法获取你想要的那个ref(wrappedComponent的ref)。要解决这个问题，这里有两个方法：a) 像React Redux...

/** * type :状态 * editable(可以编辑) span onclick * editing(正在编辑) input onchange save * uneditable(不可以编辑 ) chirdren */const useEditing = (initialState) => { const [editing, setEditing] = useS...

on开头的事件 监听toggle开头的事件 切换state状态handle开头的事件 回调函数render 自定义render 组建书写顺序static lifeCyclecustomer MethodscustomerRenderrender(lifeCycle)  ts_开头 私有方法  引入书写顺序libalias...

// 我想要评论！！！// 我想要赞！！！// 看过的帅哥美女们，点一下，谢谢！！！！import React, { Component } from 'react';import { Button, message, Spin } from 'antd';import { connect } from 'react-redux';import { CrModal, CrTa...

The last and final feature we'll add to Minimum Viable React are keys. By keys, I refer to the key attribute that you should assign to components or simple elements when rendering lists.Why are keys...

In this part, we'll add state, i.e. setState() method, to our framework. We can already build stateful applications by passing down props and callingMVRDom.render() each time the state changes. Howeve...

React应用的构成模块：元素和组件在 JSX 当中的表达式要包含在大括号里。JSX 属性你可以使用引号来定义以字符串为值的属性const element = <div tabIndex="0"></div>;也可以使用大括号来定义以 JavaScript 表达式为值的属性：const element = <img src={user.av...

 万变不离其宗 记住这个数据流向图 就记住了reduxview发出一个action，action会通知store改变   store会自当触发reducer(计算)，带 旧state和action 返回新的state给store  然后触发视图渲染reducer是一个纯函数  要动态将其分模块 利于管理  ，分离后需要合并 combineReducers 在createStore的...

一个很厉害的人的git上看到的 点击观看 谢谢他了  不过观看的人记得给starhttps://github.com/ManiacHanz/Learning-Notes/tree/master/redux?tdsourcetag=s_pctim_aiomsg其实就是暴露了5个核心函数，也就是redux提供的核心apiexport { createStore, combineR...

先npm run inject暴露webpack我们用create-react-app创建的项目时，并不能使用修饰器语法 修饰器语法是ES.next 2阶段特性。我在使用mobx时需要用@observable让属性被观测和组件观测变化@observer 使用路由时需要withRouter将路由信息传递个组件的props对象上等都需要用到修饰器语法。npm run inject启动后...

const fs = require('fs');const path = require('path');//读取指定文件夹下的全部文件，可通过正则进行过滤，返回文件路径数组function readAllFile(root, reg, aaa) { var resultArr = []; if (fs.existsSync(root)) { var st...

前言如何实现一个 Virtual DOM 算法理解 Virtual DOM这两个一定要认真看目前广为人知的React和Vue都采用了virtual-dom，Virtual DOM凭借其高效的diff算法，让我们不再关心性能问题，可以随心所欲的修改数据状态。在实际开发中，我们并不需要关心Virtual DOM是如何实现的，但是理解Virtual DOM的实现原理确实有必要的。本文是参...

链接In order to testLockScreen, you must first understand what itsContractis. Understanding a component’s contract is the most important part of testing a React component. A contract defines the ex...

Build Your Own React - Part 1: Simple Elements In this series of articles, we'll build a simple React-like framework. I call itMinimum Viable React, or MVR for short, because it implements all the...

In this article, we pick up where we left off in part 1. Our first app isn't particularly impressive, but it works well and has some features crucial to a practical React implementation. For example, ...

/** * Component that alerts if you click outside of it */class OutsideAlerter extends Component { constructor(props) { super(props); this.setWrapperRef = this.setWrapperRef.bi...