Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-props

Package Overview
Dependencies
0
Maintainers
1
Versions
3
Issues
File Explorer

Advanced tools

react-props

inject props to react component for high performance rendering

    0.0.3latest

Version published
Maintainers
1
Yearly downloads
13,892
decreased by-24.66%

Weekly downloads

Readme

Source

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 组件时,也就相当于全局更新).

Keywords

FAQs

What is react-props?

inject props to react component for high performance rendering

Is react-props popular?

The npm package react-props receives a total of 145 weekly downloads. As such, react-props popularity was classified as not popular.

Is react-props well maintained?

We found that react-props demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 30 Nov 2015
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc