react-props

inject props to react component for high performance rendering

demo

todomvc

使用方法

第一步：使用 injectProps

import React, { Component, PropTypes } from 'react'
import { injectProps } from 'react-props'
 
const ENTER_KEY = 13
const ESCAPE_KEY = 27
 
@injectProps()
export default class NewTodo extends Component {
    static propTypes = {
        addItem: PropTypes.func.isRequired
    }
    handleBlur = e => {
        this.checkInput(e.currentTarget)
    }
    handleKeyup = e => {
        let keyCode = e.keyCode
        if (keyCode === ENTER_KEY || keyCode === ESCAPE_KEY) {
            this.checkInput(e.currentTarget)
        }
    }
    checkInput(input) {
        let title = input.value
        if (title) {
            this.props.addItem(title)
            input.value = ''
        }
    }
    render() {
        return (
            <header id="header">
                <h1>todos</h1>
                <input
                    id="new-todo"
                    placeholder="What needs to be done?"
                    onBlur={ this.handleBlur }
                    onKeyUp={ this.handleKeyup } />
            </header>
            )
    }
}

第二步：编写 selector

selector 的作用是从 global state 中取出一份数据，合并到 react 组件的 props 属性。

// selectors.js
 
export let NewTodo = (state, actions, props) => {
    return actions
}
 
export let Main = (state, actions, props) => {
    let { todos } = state
    return {
        ...actions,
        isAllCompleted: !!todos.length && todos.every(item => item.status),
    }
}
 
export let Todos = (state, actions, props) => {
    let { todos, activeFilter } = state
    return {
        ...actions,
        todos: todos.filter(todo => {
            switch (activeFilter) {
                case 'SHOW_ALL':
                return true
 
                case 'SHOW_ACTIVE':
                return !todo.status
 
                case 'SHOW_COMPLETED':
                return todo.status
            }
        })
    }
}

selector 函数前三个参数为固定的。

• state: 全局 state 数据
• actions: flux 的 actions 函数集
• props: 父组件传递过来的初始 props

第三步，去掉相关父组件手动传 props 的做法

import React, { Component, PropTypes } from 'react'
import NewTodo from '../components/NewTodo'
import Main from '../components/Main'
import Filters from '../components/Filters'
import { injectProps } from 'react-props'
 
@injectProps()
export default class Root extends Component {
    render() {
        return (<div>
                    <NewTodo /> // 裸组件
                    <Main id="main" /> // 或者只传关键属性
                    <Filters />
                </div>)
    }
}

第四步，编写 match 函数

match 函数响应 action 调用，返回需要更新的 selector 名

import * as filter from './handlers/activeFilter'
 
let matcher = data => {
    let { key } = data
    switch (true) {
        case filter.hasOwnProperty(key):
            return ['Filters', 'Todos']
        default:
            return 'Root'
    }
}
 
export default matcher

第五步，设置 flux 配置

flux 配置让 react-props 能拿到必要的数据

let store = createStore(handlerList)
 
let { getState, actions } = store
 
setFluxConfig({
    getState,
    actions,
    selectors,
    match
})

最后一步，侦听 action

如果你用 redux，则如下配置：

reducer = bindReducer(reducer)
let store = createStore(reducer, initialState)

如果你用 refer，则如下配置:

import { createStore } from 'refer'
import * as handlers from './handlers'
import { setFluxConfig, updater } from 'react-props'
import * as selectors from './selectors'
import match from './match'
 
let store = createStore([updater, handlers])
 
let { getState, actions } = store
 
setFluxConfig({
    getState,
    actions,
    selectors,
    match
})
 
export default store

如果你想手动处理，则：

import { handleAction } from 'react-props'
 
let data = {
    type: 'ADD_TODO',
    text: 'text for todo'
}
 
handleAction(data) // match 函数将拿到这个 data

此外，不需要再做什么，视图会根据 match 函数的返回值做局部更新(当更新范围为 Root 组件时，也就相当于全局更新).