OOP
Stateful Class
FP
Pure
Function
React Component is described mostly by
React Today and Tomorrow React conf 2018
Ｗhat in React still sucks
Ｗhat in React still sucks
- giant component
- confusing class
- reuse logic
Giant Component
class ActInfo extends Component {
componentDidMount() {
this.fetchActInfo()
this.startTimer()
this.fixWindow()
}
componentWillUnmount() {
this.cancelFetchActInfo()
this.clearTimer()
this.unFixWindow()
}
componentDidUpdate(prevProps) {
if(this.props.aaa !== prevProps.aaa) {
...
}
}
}- logic is separated in mount and update lifecycle
- watch some props in update lifecycle
Ｗhat in React still suck
- giant component
- confusing class
- reuse logic
Confusing class
- binding this in class is confusing for beginner
- function component to class component
- hard to optimize for compiler
Ｗhat in React still suck
- giant component
- confusing class
- reuse logic
React Reuse Logic Pattern
- createClass and Mixins
- higher order component
- render props
Problems happen when these pattern scale
const App = React.createClass({
// Use the mixin!
mixins: [
MouseMixin,
toolTipsMixin,
popUpMixin
],
render() {
const { x, y } = this.state
return (
<div
style={{ height: '100%' }}
onMouseMove={this.handleMouseMove}
>
<h1>The mouse position is ({x}, {y})</h1>
</div>
)
}
})
createClass and mixins
- ECMAScript 2015 class not support
- where attribute coming from is confusing
- lifecycle hijack
- attribute naming conflict and override
Mixins Consider Harmful
Dan Abramov in react official blog
Higher Order Component
const ComponentA = ({ doSomeThing }) => (
<div onClick={doSomeThing} />
)
compose(
withRouter
withContext
connect
withI13n
withI18n
)(ComponentA)- where props coming from is confusing
- props naming conflict and override
Never write another Hoc
by Michael Jackson Phoenix React meetup
Render Props
const App = () => (
<Tooltip>
{(renderToolTip) => (
<MouseHover>
{(handleMouseHover, isMouseHover) => (
<div
onMouseHover={handleMouseHover}
className={
isMouseHover ? style.active : style.normal
}
>
{renderToolTip()}
</div>
)}
<MouseHover>
)}
</Tooltip>
)
What in react still sucks
- giant Component
- logic is separated in mount and update lifecycle
- watch some props in update lifecycle
- confusing class
- this binding is confusing for beginner
- hard for compiler optimize
- functional component to class component
- reuse logic
- declarative and explicit dependency
- naming conflict
- wrapper hell + multiple createElement call
What are React hooks
make Function Component great again
useState hooks
const Cmp = () => {
const [state, setState] = useState(initialValue)
return (
<div onClick={() => setState(value)}>
{state}
</div>
)
}useEffect hooks
const Cmp = () => {
useEffect(() => {
const timeout = setTimeout(() => {}, 10000)
return () => clearTimeout(timeout)
})
return (
<div>
{state}
</div>
)
}rewrite a Carousel Example
custom hook demo
minify comparison
hoc
babel loose compile 3.8KB
minify 2.5KB
0.66%
hooks
babel loose compile 1.4KB
minify 684 Byte
0.48%
What in react still sucks
- giant Component
- logic is separated in mount and update lifecycle
- watch some props in update lifecycle
- confusing class
- this binding is confusing for beginner
- hard for compiler optimize
- functional component => class component
- reuse logic
- wrapper hell + multiple createElement call
- declarative and explicit dependency
- naming conflict
😀
😀
😀
😀
😀
😀
😀
😀
More hooks
-
Basic Hooks
- useState
- useEffect
- useContext
-
Additional Hooks
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeMethods
- useDebugValue
- useLayoutEffect
How hooks work
pseudo code
let hooks = null;
export function useHook() {
hooks.push(hookData);
}
function reactInternalRenderAComponentMethod(component) {
hooks = [];
component();
let hooksForThisComponent = hooks;
hooks = null;
}Rule of hooks
- hooks should be the same order in every rendering
- no conditional hook
- only call hooks inside component and custom hooks
- eslint-plugin-react-hooks
state linked list
setter linked list
State 1
setter 1
State 2
setter 2
State 3
setter 3
function with hook vs
Class Component
an Apply job example
function in Component capture all props and state for it own render
useCallback & useEffect
useEffect(() => {
}, [listenOuter1, listenOuter2])
const memoizedCallback = useCallback(() => {
}, [listenOuter1, listenOuter2])
Frequently Asked Questions
How to learn hooks?
❌
✅
how about testing
🚧 Enzyme
class Component is bad and will be deprecated
rewrite everything with hooks?
will hooks replace redux?
will context api replace redux?
React-Redux v7 is rewritten in hooks
One more thing
OOP
Stateful Class
FP
Pure
Function
React Component is described mostly by
Stateful Class Model
🤔 receive props
🤔 pure render
🤔 no direct instantiation
Pure Function Model
🤔 local mutable state
class Item extends Component {
state = { isOn: false }
}const Item = ({ text }) => (
<div>{text}</div>
)OOP
stateful
Class
FP
pure
function
React Component is described mostly by
React Hooks and Component
By Tarun Sharma
