React项目实战:react-redux-router基本原理
React相关React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架。 JSX本质上来讲,JSX 只是为 const element = ( <h1 className="greeting"> Hello,world! </h1> ); 编译为: const element = React.createElement( 'h1',{className: 'greeting'},'Hello,world!' );
const element = { type: 'h1',props: { className: 'greeting',children: 'Hello,world' } }; 这样的对象被称为 ReactDOM.render( element,document.getElementById('root') ); 每当 React 元素发生变化时, 组件 & Props当 React 遇到的元素是用户自定义的组件,它会将 JSX 属性作为单个对象传递给该组件,这个对象称之为 //使用 ES6 class 来定义一个组件,组件名称必须以大写字母开头。 class Welcome extends React.Component { render() { return <h1>Hello,{this.props.name}</h1>; } } const element = <Welcome name="Sara" />; ReactDOM.render( element,document.getElementById('root') ); 我们来回顾一下在这个例子中发生了什么:
State & 生命周期组件的通过 class Toggle extends React.Component { constructor(props) { super(props); //初始化this,并赋值this.props this.state = {isToggleOn: true}; //初始化this.state this.handleClick = this.handleClick.bind(this); //为this.handleClick绑定this对象 } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); //用this.setState()更新this.state } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } } ReactDOM.render( <Toggle />,document.getElementById('root') ); 每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀
当项目视图交互复杂且频繁的时候,依旧采用 state 进行状态更改会显得异常繁琐和不可预测。 Redux相关三大原则:
ActionAction 是把数据从项目传到 store 的有效载荷。它是 store 数据的唯一来源。通常你会通过 Action 本质上是 JavaScript 普通对象,添加新 todo 任务的 action 是这样的: { type: 'ADD_TODO',text: 'Build my first Redux app' }
function addTodo(text) { return { type: 'ADD_TODO',text: text } } 这样做将使 action 创建函数更容易被移植和测试。只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。 dispatch(addTodo(text)); //或者创建一个 被绑定的 action 创建函数 来自动 dispatch: const boundAddTodo = (text) => dispatch(addTodo(text)); boundAddTodo(text); store 里能直接通过 store.dispatch() 调用 dispatch() 方法,但是多数情况下你会使用 react-redux 提供的 ReducerAction 只是描述了有事情发生了这一事实,而 (previousState,action) => newState 保持 reducer 纯净非常重要。永远不要在 reducer 里做这些操作:
我们将以指定 state 的初始状态作为开始。Redux 首次执行时,state 为 undefined,此时我们可借机设置并返回应用的初始 state: const initialState = {}; //初始化state function todoApp(state = initialState,action) { switch (action.type) { case 'ADD_TODO': return Object.assign({},state,{ text: action.text }) default: return state //在 default 情况下返回旧的 state } } 每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同,分别对应它管理的那部分 state 数据。
import { combineReducers } from 'redux'; const todoApp = combineReducers({ visibilityFilter,todos }) export default todoApp; 注意上面的写法和下面完全等价: export default function todoApp(state = {},action) { return { visibilityFilter: visibilityFilter(state.visibilityFilter,action),todos: todos(state.todos,action) } }
Storeaction 描述发生了什么,reducers 根据 action 更新 state,
我们使用 combineReducers() 将多个 reducer 合并成为一个。现在我们将其导入,并传递 import { createStore } from 'redux' import todoApp from './reducers' let store = createStore(todoApp) createStore() 的第二个参数是可选的,用于设置 state 初始状态。这对开发同构应用时非常有用,服务器端 redux 应用的 state 结构可以与客户端保持一致,那么客户端可以将从网络接收到的服务端 state 直接用于本地数据初始化。 let store = createStore(todoApp,window.STATE_FROM_SERVER); 数据流Redux 应用中数据的生命周期遵循下面 4 个步骤:
Router相关直接使用整合后的 容器组件 和 展示组件Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。 明智的做法是只在最顶层组件(如路由操作)里使用 Redux。其余内部组件仅仅是展示性的,所有数据都通过 props 传入。
系列目录
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |