
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
react-props
Advanced tools
inject props to react component for high performance rendering
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 的作用是从 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 函数前三个参数为固定的。
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 函数响应 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 配置让 react-props 能拿到必要的数据
let store = createStore(handlerList)
let { getState, actions } = store
setFluxConfig({
getState,
actions,
selectors,
match
})
如果你用 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 组件时,也就相当于全局更新).
FAQs
inject props to react component for high performance rendering
We found that react-props demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.