React
wust_cyl
在非洲,瞪羚每天早上醒来时,他知道自己必须跑的比最快的狮子还快,否则就会被吃掉.狮子每天早上醒来时,他知道自己必须追上跑得最慢的瞪羚,否则就会被饿死.不管你是狮子还是瞪羚,当太阳升起时,你最好开始奔跑
展开
-
React - getSnapshotBeforeUpdate() 的使用
getSnapshotBeforeUpdate() 方法1:在render之前调用,state已更新 2:典型场景:获取render之前的dom状态我们来看一个例子,每一秒钟都会加入一个新的<div>msg : number</div>假如我们使用滑轮移到某个地方,内容物会随着时间不断下降,因为新生成的div会把它挤下来,如何保持不动了?<...原创 2018-11-20 17:43:24 · 25713 阅读 · 11 评论 -
React -- 使用React和express MongoDB写的聊天软件
看一下截图吧!PS:聊天内容纯属虚构 最近考试也比较多,耽搁了不少时间,写的也蛮久的。使用creat-react-app脚手架搭建的react项目,服务器端使用了比较简单的express.js 数据库用的MongoDB。代码也不怎么规范。。。server.js存放的服务器代码,user.js主要处理/user/.....的请求 model.js是用来建立Mong...原创 2018-12-22 11:12:17 · 631 阅读 · 0 评论 -
React -- react中关于构造函数中super(props)的问题
用react开发有一段时间了,有一个疑惑,为什么构造函数中需要写super(props)?第一种情况,假如我们不写会怎么样?import React, { Component } from "react";class Text extends Component { constructor (props) { // super( ); conso...原创 2018-12-10 22:54:52 · 1584 阅读 · 0 评论 -
React -- 使用react开发简书首页部分
jianshu主要是想熟悉组件化开发原创 2018-12-03 20:16:53 · 258 阅读 · 0 评论 -
React - visual dom
假如react底层没有虚拟dom,那么如何处理state props变化,而重新render了?我对上面进行一下改进下面这个算法比第一个要好一点,但是还是非常好性能,所以react提出了虚拟dom概念虚拟dom就是一个js对象 为什么要提出虚拟dom,因为我们就是想把对dom的操作(非常消耗性能)变成对js对象的操作(低消耗)。减少了对dom的创建和对dom的比...原创 2018-11-27 16:52:32 · 162 阅读 · 0 评论 -
React -- redux-thunk的简单使用
为什么要使用redux-thunk, 因为我们想把像ajax请求的异步操作不放在声明周期函函数里面, 便于管理。使用redux-thunk中间件,我们可以在action构造器中返回一个函数,而不是一个对象。export const initStateAction = (data) => ({ type: INIT_LIST_ACTION, data})expo...原创 2018-11-29 13:35:31 · 3013 阅读 · 0 评论 -
Redux - Unhandled Rejection (Error): You may not call store.getState() while the reducer is executin
Unhandled Rejection (Error): You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of r...原创 2018-11-29 09:23:17 · 3111 阅读 · 2 评论 -
React - React-Router的简单介绍
Router中文意思是路由,以前多见于后端,现如今前端也有自己的路由。为什么要使用路由?1:单页页面实现页面的切换2:可以通过URL对页面进行定位3:语义化组织资源 Router路由实现的基本结构首先是路由的定义,我们通过配置文件,或者React-Router的标记来定义路由,这些我们定义好的路由被React-Router解析,然后将对应的组件render出来,...原创 2018-11-23 15:30:34 · 3222 阅读 · 0 评论 -
React - 在React中简单应用Redux
Redux引入Redux就是为了方便管理状态,那么在React代码中如何使用了。换句话说就是如何使用storea里面维护的state,然后在react中如何产生action,用于更新state。我们需要用的一个connect函数。具体看代码import React from "react";import ReactDOM from "react-dom";import {...原创 2018-11-22 21:16:42 · 150 阅读 · 0 评论 -
React - 简单理解Redux的action reducer store
什么是store,如图这就是一个store,我们可以看到由dispatcher reducer state构成,不难发现store其实是一个虚拟概念。dispatcher是一个函数,用于广播action,将action传给所有的reducer,reducer然后处理它,对state进行更新reducer是一个函数,用于通过action对state进行更新state是一个对象,...原创 2018-11-22 14:22:23 · 1221 阅读 · 0 评论 -
React - Context的简单使用
Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中,数据是通过 props 属性由上向下(由父及子)的进行传递的,但这对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI主题),这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式,而不必通过组件树的每个层级显式地传递 ...原创 2018-11-21 21:43:58 · 622 阅读 · 0 评论 -
React - 函数作为子组件
函数作为子组件也是React的一种设计模式,和高级组件一样,仅仅是一种设计模式。这种模式如何工作的了?举个栗子这是三个按钮,我可以选择其中的一个,然后下方可以显示你的颜色。这个如何用函数作为子组件解决了?const options = [ { name: 'Red', val: 'red' }, { name: 'Orange', val: 'or...原创 2018-11-21 13:15:05 · 513 阅读 · 0 评论 -
React - 高级组件的简单应用
高阶组件(HOC)是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式。具体而言,高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。举个栗子比如我们需要在input标签下面加上一个计时器。你可以写一个组件Time然后使用它,但是这很死板。比如这个Time中没有“下午”,或者说它含有你不想要的其他部分,不是很灵活...原创 2018-11-20 21:08:43 · 427 阅读 · 0 评论 -
React - Virtual Dom
详情看官网:协调(Reconciliation)别人的demo演示:Demo记得打开控制台看输出!!!一句话,记得在各个兄弟相同类型的节点上面设置key属性,这样react才能高效处理它们。...原创 2018-11-20 17:56:55 · 101 阅读 · 0 评论 -
React -- 自己实现一个react-router-dom里面的一些组件(简单路由)
本次主要实现的是Hash路由,也就是监听/#/后面的hash值得变化。使用过react的都知道,this.props上面有一个比较重要的属性location,match, history等,这一次我们实现里面的几个简单属性,用于完成路由,如下:location: {pathname } history: { push} match: { url, path, params}由于设计到...原创 2019-03-31 17:40:48 · 780 阅读 · 0 评论