react
关注
分享
扫一扫
科学的发展-只不过是读大自然写的代码
科学的发展-只不过是读大自然写的代码
展开
-
flux-理解实践
1.概述整个流程如下：首先要有 action，通过定义一些 action creator 方法根据需要创建 Action 提供给 dispatcher View 层通过用户交互（比如 onClick）会触发 Action Dispatcher 会分发触发的 Action 给所有注册的 Store 的回调函数 Store 回调函数根据接收的 Action 更新自身数据之后会触发一个 change 事件通知 View 数据更改了 View 会监听这个 change 事件，拿到对应的新数据并.原创 2020-06-13 22:31:13 · 428 阅读 · 0 评论 -
react-项目分析笔记-npm start到底做了什么
1package.json22.1 package.json{ "scripts": { "start": "http-server -a 0.0.0.0 -p 8000" }}2.2命令：npm install http-server这时候的package.json{ "scripts": { ...原创 2019-12-18 11:14:33 · 1603 阅读 · 0 评论 -
react-高阶组件-实验-Provider传递数据
第一版代码-在高阶函数中provider传递数据成功import App from './mytest5/my'ReactDOM.render(<App />, document.getElementById('root'));import React, { Component } from 'react';import PropTypes from 'prop-...原创 2019-11-08 13:13:59 · 6745 阅读 · 0 评论 -
react-高阶组件简单实验
第一版-高阶函数雏形代码import App from './MyTest2/Mylabal'ReactDOM.render(<App />, document.getElementById('root'));//import {Component} from 'react';import React, { Component } from 'react';...原创 2019-11-08 08:39:56 · 211 阅读 · 0 评论 -
react-高阶组件理解
运行效果第一版import React, { Component } from 'react';import SubLable from './SubLabel'class MyLabel extends Component { render() { return ( <SubLable/> ); ...原创 2019-11-07 17:01:01 · 239 阅读 · 0 评论 -
react-智能组件与傻瓜组件
第一版运行效果代码myLabe.jsimport React, { Component} from 'react';// 傻瓜组件class MyLable extends Component { constructor(props) { super(props); this.onFun = props.onFun; ...原创 2019-11-07 08:30:03 · 361 阅读 · 0 评论 -
react-生命周期
原创 2019-09-02 11:19:32 · 115 阅读 · 0 评论 -
.getIn .toJS() 详解 filter()
get() 、 getIn()作用：获取数据结构中的数据//获取List索引的元素ImmutableData.get(0);// 获取Map对应key的valueImmutableData.get('a');// 获取嵌套数组中的数据ImmutableData.getIn([1, 2]);// 获取嵌套map的数据ImmutableData.getIn(['a', 'b']...原创 2019-09-03 08:44:39 · 1694 阅读 · 0 评论 -
react实例3-react-redux
actiontypeexport const INCREMENT = 'increment';export const DECREMENT = 'decrement';actionimport * as ActionTypes from './ActionTypes.js';export const increment = (counterCaption) => { r...原创 2019-09-10 15:14:09 · 137 阅读 · 0 评论 -
react-事件处理-学习笔记
概述在redux的生命周期过程中，如果数据变化了又恢复了，是不会体现出渲染的。所以我想把这个过程通过事件分开，单仍然不能够触发渲染。单是我把事件使用的这个过程记录下来。这虽然和直接调用的效果一样，单是想总是有价值的，在分析吧，先做下记录。代码const EventEmitter = require('events').EventEmitter;const emitter = new ...原创 2019-09-30 08:57:59 · 145 阅读 · 0 评论 -
react初学体悟
1.reac本身就是一个数据和控件的结合体，例如 :var a=valuevar b=可以说，reac就是一控件为单位来组织ui的，任何一个单元都是输和控件的结合体。所以对于reac来说变量可以是数据，也可以是控件+数据。2.关于state和propsstate就是是控件要用的数据，数据无疑是动态的。props是父控件传递给子控件的数据，是外面来的。从对象的角度讲，props就是指...原创 2019-09-02 10:58:15 · 113 阅读 · 0 评论 -
react-动态追加控件
运行效果点击前 点击后 代码<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>React 实例</title><script src="https://cdn.staticfile.org/react/16.4....原创 2019-09-02 10:23:25 · 1149 阅读 · 0 评论 -
react-动态添加组件
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>React 实例</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js">...原创 2019-08-30 16:47:41 · 5189 阅读 · 0 评论 -
react实例-3点击增加
src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import ControlPanel from './ControlPanel';import './index.css';ReactDOM.render( <ControlPanel/>, document.getEle...原创 2019-08-14 15:15:12 · 183 阅读 · 0 评论 -
react实例-3点击增加+总数统计
src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import ControlPanel from './ControlPanel';import './index.css';ReactDOM.render( <ControlPanel/>, document.getEle...原创 2019-08-14 15:20:02 · 569 阅读 · 0 评论 -
react实例-3点击增加+总数统计+flux
src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import ControlPanel from './views/ControlPanel';import './index.css';ReactDOM.render( <ControlPanel/>, document.g...原创 2019-08-14 15:25:51 · 287 阅读 · 0 评论 -
react实例-3点击增加+总数统计+flux(代码分析)
原创 2019-08-14 15:44:55 · 209 阅读 · 0 评论 -
react实例-3点击增加+总数统计+redux_base
/src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import ControlPanel from './views/ControlPanel';import './index.css';ReactDOM.render( <ControlPanel />, documen...原创 2019-08-14 16:28:14 · 210 阅读 · 0 评论 -
react实例-3点击增加+总数统计+redux_base(代码分析)
原创 2019-08-15 10:20:56 · 259 阅读 · 0 评论 -
react实例-3点击增加+总数统计+redux_with_context
1 运行效果：点击加减，总数也同步更新2代码2.1 \src\Provider.jsimport {PropTypes, Component} from 'react';class Provider extends Component { getChildContext() { return { store: this.props.store }; ...原创 2019-08-15 11:20:26 · 223 阅读 · 0 评论 -
react实例-3点击增加+总数统计+redux_with_context(代码分析)
原创 2019-08-15 11:27:25 · 140 阅读 · 0 评论 -
react实例-3点击增加+总数统计+redux_smart_dumb(代码分析)
原创 2019-08-15 13:35:36 · 182 阅读 · 0 评论 -
react实例-3点击增加+总数统计+redux_with_context
1 运行效果*：点击加减，总数也同步更新2代码2.1 \src\index.jsimport React from 'react';import ReactDOM from 'react-dom';import ControlPanel from './views/ControlPanel';import './index.css';import store from './St...原创 2019-08-15 13:50:02 · 243 阅读 · 0 评论 -
react实例-点击增加
src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import ClickCounter from './ClickCounter';import './index.css';ReactDOM.render( <ClickCounter/>, document.getEle...原创 2019-08-14 15:05:39 · 571 阅读 · 0 评论