浅談React Hook s(一)

ついこの間[email protected]と発表され、ホクズも正式に幕前に来ました.個人的にはReactにとってHooksは画期的な機能だと思います.Hooksは詳しく紹介しません.Hooksについてはよく分からないなら、まずIntroducng Hook sを見てください.
ホークスは何を持ってきましたか?
簡単にHooksは、Function Componentsでstateや他のReact特性を使用できる能力を持っています.これがもたらす最初の直感的な利点は、元々書いていたFunction Componentsが需要変動のためにstateを追加する必要があります.Class Componentsを再構成する必要がなくなりました.
Hooksがもたらした最大の利点は、私たちの業務コードをよりよく組織し、コード多重化率を高めることです.一例を通して説明します.「コンポーネントはブラウザの幅によって変化し、異なる内容を表示する必要があります.」
まずClass Componentで実現します.

export default class ResizeClassComponent extends React.Component {
  constructor(props) {
    super(props);

    this.resizeHandler = null;
    this.state = {
      width: window.innerWidth,
    }
  }

  componentDidMount() {
    this.resizeHandler = () => {
      this.setState({
        width: window.innerWidth
      })
    }
    window.addEventListener('resize', this.resizeHandler);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeHandler);
  }

  render() {
    const { width } = this.state;
    return (
      <div>width: {width}div>
    )
  }
}

今は大丈夫ですが、もう一つのコンポーネントがこの機能を実現する必要があります.同じコードをもう一度書いてください.もし多くの部品があれば、この機能が必要ですか?毎回書いても必ず現実的ではないです.render propsまたは を使ってこの問題を解決するという人がいます.

// render props
class ResizeRenderProps extends React.Component {
  constructor(props) {
    super(props);

    this.resizeHandler = null;
    this.state = {
      width: window.innerWidth,
    }
  }

  componentDidMount() {
    this.resizeHandler = () => {
      this.setState({
        width: window.innerWidth
      })
    }
    window.addEventListener('resize', this.resizeHandler);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeHandler);
  }

  render() {
    return this.props.children(this.state.width);
  }
}

export default class ResizeClassComponent extends React.Component {
  render() {
    return (
      <ResizeRenderProps>
        {width => <div>width: {width}div>}
      ResizeRenderProps>
    )
  }
}

//     
function withResize(WrappedComponent) {
  return class ResizeHoc extends React.Component {
    constructor(props) {
      super(props);

      this.resizeHandler = null;
      this.state = {
        width: window.innerWidth,
      }
    }

    componentDidMount() {
      this.resizeHandler = () => {
        this.setState({
          width: window.innerWidth
        })
      }
      window.addEventListener('resize', this.resizeHandler);
    }

    componentWillUnmount() {
      window.removeEventListener('resize', this.resizeHandler);
    }

    render() {
      return <WrappedComponent width={this.state.width} />;
    }
  }
}

export default withResize(class ResizeClassComponent extends React.Component {
  render() {
    return (
      <div>width: {this.props.width}div>
    )
  }
})

機能は実現されたが、いずれも従来のコンポーネントを再現することは避けられず、さらに階層を増やして、多く使うと「wrapper hell」となり、これをぬきにして、render propsと 自体の複雑さは友好的ではない.
Hooksはどうやって解決しますか?

import React, { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const resizeHandler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', resizeHandler);
    return () => window.removeEventListener('resize', resizeHandler)
  })

  return width;
}

export default function ResizeHooks() {
  const width = useWindowWidth();
  return (
    <div>width: {width}div>
  )
}

簡単で分かりますか?Hookをカスタマイズしたいだけです.(つまり普通の関数です.いくつかのHookを内蔵しています.)使う時は普通の関数を呼び出すように、複雑な概念はありません.理解が必要です.前に述べたように、Hooksは私達のコードを組織してくれます.相関コードは全部一緒にしてください.Class Componentsのように各ライフサイクル関数に散るのではなく、図を貼ると分かりやすいです.
画像ソース:twitter.com/prchdk/stat…
図から論理関連コードが個々にHookに引き抜かれていることが分かります.これはこの部分に状態がある論理が多重化され、より分かりやすいことを意味します.
ちょっと説明してください.「状態の論理」とは、ここの状態がReactのstateを指します.対応する無状態の論理は普通の関数です.Hooksの前に、このような状態の論理を多重化するには、上記のrender propsおよび 以外に、より簡単で直接的な方法がない.Hooksがあったら、この部分のロジックは単独で引き抜かれて、職責がより明確になり、多重がより簡単になり、コードがより明確になり、テストにも便利です.
試してみます
私が言ったこれらはホークスに興味をそそられましたか?実はReact公式の態度からHooksの傾向が見られます.あるいはFunction Componentsです.Class Componentsは除去されないと言っていますが、プロジェクトの中でまず小さい範囲で試してみてもいいです.きっと好きになりますよ.
締め括りをつける
前に書いたのは分散していますが、最後にHooksが持ってきた開発体験の向上をまとめます.

Function Componentsにstateを追加したい場合、再構成コード

は不要です.

は、render propsおよび に比べて、状態がある論理をより簡単に直観的に多重する方法

を提供する.

コード論理がより統一され、コード構造を容易に組織する

.

はテストに便利です.
Hooksができたら、Function Componentsはもう「高級文字列モデル」ではないですよね!?
以上は私個人のReact Hookに対する考え方です.もし間違いがあれば、ご指摘ください.
原文リンク:github.com/sliwey/blog…
拡張読み:

Introduccing Hook s

Making Sense of React Hook s