Валерий Кузьмин, Kontur.Recognition
Екатеринбург, 2017
// элемент
React.createElement('div')
// компонент
class Component extends React.Component {...}
// stateless компонент
const Component = (props) => {...}
// компонент высшего порядка (HOC)
const Component = () => <OtherComponent/>
// enhancer
const enhancer = (Component) => <Component {...newProps} />
// фабрика enhancer-ов
const enhancerFabric = ({params}) => ({Component})
=> <Component {params} />
Терминология
connect(
mapStateToProps,
mapDispatchToProps,
)(Component)
react-redux
<Provider store={...}>
<Component/>
</Provider>
by Andrew Clark
"React utility belt ... Think of it like lodash for React"
"куча enhancer fabric"
9296
TS/Flow
const Component = ({field, setField}) => {...}
export default withState(
'field', // propName
'setField', // setterName
'' // initial state
)(Component)
const reducer = (state, action) => {
if (action.type === 'ADD')
return [...state, action.payload];
return state;
}
const Component = ({todos, dispatch}) => ...
export default withReducer(
'todos', // statePropName
'dispatch', // dispatchPropName,
reducer,
[] // initialState
)(Component);
const Component = () => {...}
const ComponentV2 = compose(
withState(...),
mapProps(...),
myEnhancer(...),
)(Component);
const ComponentV2 = compose(
withState(...),
mapProps(...),
myEnhancer(...),
connect(mapStateToProps, mapDispatchToProps)
)(Component);
const stateless = ({prop1, prop2}) => {...}
onlyUpdateForKeys(['prop1'])(stateless);
@onlyUpdateForKeys(['prop1']);
class Classy extends React.component {
...
}
Не в этот раз
темная сторона силы
lifecycle({
componentDidMount() {
this.props.setField(...);
}
})(Component)
hint: use reassemble
render() {
if(this.props.flag)
return null;
return <Component/>
}
branch(
(props) => props.flag,
null,
Component,
)
* еще не попробовал reassemble
vkuzmin@kontur.ru
malcoriel
http://bit.ly/rec-frbr