React 的過去現在未來

Before React.js

Separation Concern

Ｍodel

View

Rethinking best practices - Pete Hunt JSConf EU 2013

Template separate technology, but not concern

Dispaly logic and markup 無可避免的高耦合
Dispaly logic and markup 高度聚合

Ｍodel

View

Breakdown MVC into Component

重複利用 html DOM tree 的概念
容易針對相同的需求share same code
宣告式 ui 單一資料流

React to Single Source of Truth, not imperative communication

view and behavior should be predictable

view = f(state)

Encourage immutable variable

shouldComponentUpdate shallow compare
variable is consistent as it been declared 減少 tracing code 的認知負擔

Ｗhat in React still sucks

huge component

Logic separated in multiple lifecycle method

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) {
      ...
    }
  }
}

Ｗhat in React still suck

huge component
confusing class

Confusing class

binding this in class is confusing for beginner
functional component => class component
hard to optimize for compiler

Ｗhat in React still suck

huge component
confusing class
reuse logic

Sharing Component

	view(html css)	interaction render logic
	✅	✅
	✅	❔
	❔	✅

stateful Component

stateless component

❔❔❔

Mixins in React.createClass

Mixins

ComponetA

ComponetB

const MouseMixin = {
  getInitialState() {
    return { x: 0, y: 0 }
  },
  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }
}

const App = React.createClass({
  mixins: [ MouseMixin ],
  render() {
    const { x, y } = this.state
    return (
      <div 
        style={{ height: '100%' }} 
        onMouseMove={this.handleMouseMove}
      >
        <h1>The mouse position is ({x}, {y})</h1>
      </div>
    )
  }
})

However

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>
    )
  }
})

Mixins Considered harmful

mixins 與 mixins 之間以及 mixins 與 component 之間的隱式依賴讓程式變得難以理解跟解耦合
life cycle method 也可以被 mixins 劫持
命名衝突
ES2015 class 並不支援 mixins

Higher Order Component

Higher order function
高階函式

takes one or more functions as arguments
return a function as its result

f=g(h(x))

Higher Order Component aka HOC

takes a component as arguments
return a component as its result
pass sharing logic method and data through props

Componnt

hoc

const withFeature = (Cmp) => {
    class Wrapper extends Component {
      componentDidMount () { ... }

      componentWillUnmount () { ... }

      componentDidUpdate () { ... }
      
      shareMethod = () => {}
      
      state = {
        shareData: 'initial'
      }

      render() {
        <Cmp
          data={this.state.shareData}
          method={this.shareMethod} 
        />
      }
    }
    return Wrapper
}

export default withFeature(Cmp)

Pros

vertical seperation concern
eazy to use hoc(Component)
eazy to extends hocA(hocB(Component))
潮

Example

```
react-redux connect
```
```
react-i13n createI13n
```
```
recompose pure
```

However

Never write another Hoc
by Michael Jackson Phoenix React meetup

Never write another HOC
by Michael Jackson

when multiple hocs embed
where is your prop come from?
naming conflict

const ComponentA = ({ doSomeThing }) => (
  <div onClick={doSomeThing} />
)

compose(
  withRouter
  withContext
  connect
  withI13n
  withI18n
)(ComponentA)

render Props

call back function as a props (often as child)
sharing method or data in the argument

const App = () => (
  <MouseHover>
    {(handleMouseHover, isMouseHover) => (
      <div
       onMouseHover={handleMouseHover}
       className={
         isMouseHover ? style.active : style.normal
       } 
      />
    )}
  <MouseHover>
)

Pros

dependency is clear
no more naming conflict

const App = () => (
  <Tooltip>
   {(renderToolTip)=> (
      <MouseHover>
        {(handleMouseHover, isMouseHover) => (
          <div
           onMouseHover={handleMouseHover}
           className={
             isMouseHover ? style.active : style.normal
           } 
          >
           {renderToolTip()}
          </div>
        )}
      <MouseHover>
   )}
  </Tooltip>
)

Example

React 16 context api
React Router
Apollo client

However

Git diff

Wrapper hell ＋ Multiple call React .createElement

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
- git diff
- declarative and explicit dependency
- naming conflict

React hooks

make Functional Component great again

useState Demo

useEffect Demo

customer hook

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
- git diff
- declarative and explicit dependency
- naming conflict

😀

How hooks works

pseudo code

let hooks = null;

export function useHook() {
  hooks.push(hookData); 
}

function reactInternalRenderAComponentMethod(component) {
  hooks = [];
  component();
  let hooksForThisComponent = hooks;
  hooks = null;
}

Rule of hooks

top level
no condition
every render always the same order hook
only call hooks inside
eslint plugin

controversial?

Destructuring Array Analysis

More hooks

Basic Hooks
- useState
- useEffect
- useContext
Additional Hooks
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeMethods
- useMutationEffect
- useLayoutEffect

Reactjs 過去現在未來

By zeroshine

React 的過去 現在 未來

Before React.js

Separation Concern

Rethinking best practices - Pete Hunt JSConf EU 2013

Template separate technology, but not concern

Breakdown MVC into Component

React to Single Source of Truth, not imperative communication

view and behavior should be predictable

Encourage immutable variable

Ｗhat in React still sucks

Logic separated in multiple lifecycle method

Ｗhat in React still suck

Confusing class

Ｗhat in React still suck

Sharing Component

Mixins in React.createClass

However

Mixins Considered harmful

Higher Order Component

Higher order function 高階函式

Higher Order Component aka HOC

Pros

Example

However

Never write another Hoc by Michael Jackson Phoenix React meetup

Never write another HOC by Michael Jackson

render Props

Pros

Example

However

Git diff

Wrapper hell ＋ Multiple call React .createElement

What in react still sucks

React hooks

make Functional Component great again

useState Demo

useEffect Demo

customer hook

minify comparison

What in react still sucks

How hooks works

pseudo code

Rule of hooks

controversial?

Destructuring Array Analysis

More hooks

Reactjs 過去 現在 未來

More from zeroshine

React 的過去現在未來

Higher order function
高階函式

Never write another Hoc
by Michael Jackson Phoenix React meetup

Never write another HOC
by Michael Jackson

Reactjs 過去現在未來