标签归档:react

首页 » Posts tagged 'react'

w3cmm

Redux 在车货匹配项目中的实践

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 … 继续阅读

目录 记事本 | |
w3cmm

用Dva Model优化路由配置功能

最近业务中的中后台系统基本上都是采用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: [] … 继续阅读

目录 记事本 | |
w3cmm

React Context API

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 … 继续阅读

目录 记事本 | |
w3cmm

聊一聊我对redux的理解

react是单向数据流动的的框架,数据可以从顶层组件依次传递给层级最深的组件。 react组件通信 react组件树形结构犹如家族关系: 爷爷要和小红通信:爷爷告诉爸爸,爸爸告诉小红。爸爸要和叔叔通信:可以将两者交互的state提升至爷爷,通过爷爷state的改变来完成通信使命。 现实项目中需求远比上面的关系要复杂的多,状态便变得难于管理。如果能把需要通信的组件状态放到一个store的地方,这样只需要去store更新状态与之相关的视图自动更新,这样是不是简单了很多了呢? 于是就有了redux这样的框架,redux是JavaScript 状态容器,提供可预测化的状态管理。 redux redux 设计思想: 从例子入手 来看一个最简单的例子: //reducers/inde … 继续阅读

目录 记事本 | |
w3cmm

redux-react Provider 与 connet

普通的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 … 继续阅读

目录 记事本 | |
w3cmm

React组件数据共享

众所周知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 ( & … 继续阅读

目录 记事本 | |
第 1 页,共 1 页1