Higher-Order Components 这里是一个响应鼠标事件的Higher-Order Components例子： import React from ‘react’ import ReactDOM from ‘react-dom’ const withMouse = (Component) => { return class extends React.Component { state = { x: 0, y: 0 } handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }) } render() { return ( <div … 继续阅读
最近业务中的中后台系统基本上都是采用Ant Design Pro开发，业务中路由配置模块功能过于复杂，如果组件通信只通过React props实在是痛苦不堪。Ant Design Pro中内置了dva，dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。 拆分组件 设计Model export default { namespace: ‘routeConfig’, state: { transfer: [], canvasData: [], isVisibleServiceList: false, serviceSearchParams: [] … 继续阅读
Redux已经发布3年左右，一直没有在生产环境中实践过，前段时间正好有新需求可以体验一下。本文摘取项目的部分代码进行简单的分析。 入口文件： #goodsNew/index.tsx import * as React from ‘react’; import {createStore, applyMiddleware, Middleware} from ‘redux’ import {Provider} from ‘react-redux’ import {createLogger} from ‘redux-logger’ import ‘./index.css’ import GoodsNew from ‘./goodsNew’ import reducer from … 继续阅读
import React from ‘react’ import {render} from ‘react-dom’ const ThemeContext = React.createContext(‘light’) class ThemeProvider extends React.Component { state = {theme: ‘light’} toggleTheme = () => { this.setState(({theme}) => ({ theme: theme === ‘light’ ? ‘dark’ : ‘light’, })) } render() { return ( <ThemeContext.Provider value … 继续阅读
react是单向数据流动的的框架，数据可以从顶层组件依次传递给层级最深的组件。 react组件通信 react组件树形结构犹如家族关系： 爷爷要和小红通信：爷爷告诉爸爸，爸爸告诉小红。爸爸要和叔叔通信：可以将两者交互的state提升至爷爷，通过爷爷state的改变来完成通信使命。 现实项目中需求远比上面的关系要复杂的多，状态便变得难于管理。如果能把需要通信的组件状态放到一个store的地方，这样只需要去store更新状态与之相关的视图自动更新，这样是不是简单了很多了呢？ 于是就有了redux这样的框架，redux是JavaScript 状态容器，提供可预测化的状态管理。 redux redux 设计思想: 从例子入手 来看一个最简单的例子： //reducers/inde … 继续阅读
普通的react组件是无法与redux交互的，因此需要react-Redux来对react组件加工。react redux主要提供了Provider与connect方法 常见示例： import React, {Component, PropTypes} from ‘react’ import ReactDOM from “react-dom”; import thunk from ‘redux-thunk’ import {createStore, applyMiddleware, combineReducers} from ‘redux’ import {Provider, connect} from ‘react-redux’ function postsByRed … 继续阅读
众所周知React是单向数据流动的框架，数据可以通过props一层一层的传下去。但是如果传递组件与目标组件层级相差太多，就会多出很多不必要的props传递过程。 针对此种问题，React提供了”context” API。 class Button extends React.Component { render() { return ( <button style={{background: this.props.color}}>{this.props.children}</button> ); } } class Message extends React.Component { render() { return ( & … 继续阅读