react imvc简介
1. IMVC的I是Isomorphic的缩写,意思是同构,指一份JS代码既可以在Node.js运行也可以在Browser里运行
1》M是Model,指状态以及状态变化的函数的集合,由initialState状态和actions函数组成
2》V是View的缩写,React组件
3》C是Controller的缩写,指包含生命周期方法、事件处理器、同构工具方法及负责同步View和Model的中间媒介
4》在react-imvc的Model中state是immutable data、action是pure function,View是React.js建议尽可能使用function stateless component写法。所有跟外界的交互比如:Life-Cycle method、Ajax/Fetch、Event Handler时间处理器、localStorage等都放在Controller里。
2. Controller的一些重要属性
1》View是React Component组件,该组件的props结构如下:
props.state是controller.store.getState()里的global state状态树
props.handlers是controller实例里以handleXXX形式定义的事件处理器的集合对象
props.actions是controller.store.actions里的actions集合对象
2》Model属性是一个对象,除了initialState属性外其余都是pure function
3》preload对象用来在页面显示前预加载css、json等数据
4》handlers在初始化时从controller的实例里收集以handle开头以箭头函数形式定义的方法的集合对象,用来传递给controller.View组件
3. Controller的一些重要方法
1》Event handler
import React from 'react' import Controller from 'react-imvc/controller' export default class extends Controller { View = View initialState = { count: 0, } actions = { INCREMENT: state => ({ ...state, count: state.count + 1 }), DECREMENT: state => ({ ...state, count: state.count - 1 }), CHANGE_BY_NUM: (state, num) => ({ ...state, count: state.count + Number(num) }) } // 事件处理器必须使用 arrow function 箭头函数的语法 handleIncre = () => { let { INCREMENT } = this.store.actions INCREMENT() } // 事件处理器里使用 action 更新 global state handleDecre = () => { let { DECREMENT } = this.store.actions DECREMENT() } // 将特殊的索引如 index, id 或者其他信息,缓存在 DOM attribute 里 // 在事件处理器里,从 DOM attribute 里取回 handleCustomNum = event => { let { CHANGE_BY_NUM } = this.store.actions let num = event.currentTarget.getAttribute('data-num') CHANGE_BY_NUM(num) } } /** * 在 view 组件里,可以从 props 里拿到 global state 和 global event handlers */ function View({ state, handlers }) { let { handleIncre, handleDecre, handleCustomNum } = handlers return ( <div> <h1>Count: {state.count}</h1> <button onClick={handleIncre}>+1</button> <button onClick={handleDecre}>-1</button> <button onClick={handleCustomNum} data-num={10}>+10</button> </div> ) }
2》handleInputChange(path, value, oldValue) -> final value
3》Style组件将controller.preload里配置的css展示在页面上
import React from 'react' import Controller from 'react-imvc/controller' import { Style } from 'react-imvc/component' // 加载 Style 组件 export default class extends Controller { preload = { 'main': 'path/to/css' // 配置 css 文件路径 } View = View } // 当组件渲染时,Style 标签会将 preload 里的同名 css 内容,展示为 style 标签。 function View() { return ( <div> <Style name="main" /> </div> ) }
4》Input组件用来将表单跟store联系起来
import React from 'react' import Controller from 'react-imvc/controller' import { Input } from 'react-imvc/component' // 加载 Input 组件 export default class extends Controller { View = View // 可以在 Controller 里直接写 initialState initialState = { // 多层次对象 user: { name: { first: '', last: '', }, email: '', age: 0 }, // 数组对象 friends: [{ name: 'friendA', }, { name: 'friendB', }], // 复合对象 phone: { value: '', isValid: false, isWarn: false, }, content: '' } } /** * Input 组件支持 path 写法,支持数组 * 可以用 .:/ 三种分隔符书写 path * 不需要写 value,Input 组件会使用以下属性: * 1》使用 transformer 属性可以在更新 store 之前做数据处理,接受两个参数 transformer(newValue, oldValue),其返回值将作为最后更新到 store 的 value。 * 2》使用 check 属性,可以验证字段。当 Input 组件传入了 check 属性时,它将被视为复合对象 { value, isValid, isWarn } 三个属性,它有以下行为: * - 当用户 blur 脱离表单焦点时,使用 check 函数检查 value 值,如果 check 函数返回 true,则 isValid = true,isWarn = false。 * - 当用户 focus 聚焦表单时,取消 isWarn = false 的状态。 * - 在将 input.value 更新到 store 时,会自动补全 `${name}.value` 更新 state。 * 3》使用 as 属性,可以自定义渲染标签.input 组件默认渲染为 input 标签,可以使用 as 属性将它渲染成 textarea 标签或其他可以触发 onChange 方法的组件。 */ function View({ state }) { return ( <div> firstname: <Input name="user.name.first" /> lastname: <Input name="user:name:last" /> email: <Input name="user/email" /> age: <Input name="user.age" transformer={Number} > friends: { state.friends.map((friend, index) => { return ( <div> name: <Input name={`friends/${index}/name`} /> </div> ) }) } phone: <Input name="phone" check={isValidPhone} /> content: <Input as="textarea" name="content" /> </div> ) }
3. Controller中重要的生命周期方法
.》shouldComponentCreat()方法触发时view还未被创建渲染,主要用于鉴定权限,如果用户没有权限访问该页面,可以通过 this.redirect 方法,重定向到其他页面。
.》componentWillCreate()方法触发时view还未被创建渲染,可在方法内调用接口获取首屏数据
.》componentDidFirstMount() 方法触发时用户已经看到了首屏,可在方法内调用接口获取非首屏数据。
.》componentDidMount()方法触发时component已经mount到页面,可在方法内进行DOM操作等浏览器相关活动
.》componentWillUnmount()方法触发时component即将从页面unmount,解绑计时器等跟componentDidMount相关的逆操作
.》stateDidChange(data)方法触发时store里的state发生变化并且view也重新渲染,data中为actionType, actionPayload, previousState, currentState
4. 高阶组件connect(selector)(ReactComponent)
connect是一个高阶函数,第一次调用时接受selector函数作为参数返回withData函数。withData函数接受一个React组件作为参数返回一个新的React组件。withData会将selector函数返回的数据作为props传入新的React组件。selector({state, handlers, actions})函数得到一个data参数包含三个字段,分别对应controller里的global state, global handlers和actions对象
import React from "react"; import connect from 'react-imvc/hoc/connect' const withData = connect(({ state }) => { return { content: state.loadingText } }) export default withData(Loading) function Loading(props) { if (!props.content) { return null; } return ( <div id="wxloading" className="wx_loading"> <div className="wx_loading_inner"> <i className="wx_loading_icon" /> {props.content} </div> </div> ); }