{"id":597,"date":"2019-12-16T09:00:00","date_gmt":"2019-12-16T00:00:00","guid":{"rendered":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/blog\/2019\/12\/16\/react_hook"},"modified":"2019-12-16T09:00:00","modified_gmt":"2019-12-16T00:00:00","slug":"react_hook","status":"publish","type":"post","link":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/blog\/2019\/12\/16\/react_hook\/","title":{"rendered":"React Hooks"},"content":{"rendered":"

\u3053\u3093\u306b\u3061\u306f\u3001\u571f\u5c45\u3067\u3059\u3002\u8d64\u3061\u3083\u3093\u304c\u3069\u3093\u3069\u3093\u91cd\u304f\u306a\u3063\u3066\u304d\u3066\u3001\u3057\u3070\u3089\u304f\u62b1\u3063\u3053\u3057\u3066\u3044\u308b\u3068\u304b\u306a\u308a\u30ba\u30c3\u30b7\u30ea\u304d\u307e\u3059\u304c\u3001\u305d\u306e\u5206\u6210\u9577\u3092\u5b9f\u611f\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

Hooks<\/h1>\n

React\u306eHooks\u6a5f\u80fd\u304c16.8.0<\/a>\u3088\u308a\u6b63\u5f0f\u7248\u306b\u306a\u308a\u307e\u3057\u305f\u304c\u3000\u3001\u5b9f\u306f\u307e\u3060\u4f7f\u3063\u305f\u3053\u3068\u306a\u304b\u3063\u305f\u306e\u3067\u3061\u3087\u3063\u3068\u89e6\u3063\u3066\u307f\u307e\u3057\u305f\u3002Hooks\u3092\u4f7f\u3048\u3070\u3001class\u3092\u66f8\u304f\u3053\u3068\u306a\u304fstate\u3092\u7528\u3044\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n

Hooks\u3068\u306f?<\/h1>\n

class component\u3067\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u3066\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u3067state\u306b\u30c7\u30d5\u30a9\u30eb\u30c8\u3092\u30bb\u30c3\u30c8\u3057\u305f\u308a\u3057\u3066\u3044\u307e\u3059\u304c<\/p>\n

class App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = this.defaultState();\n\n    this.handleChange = this.handleChange.bind(this);\n  }\n  handleChange(event) {\n    this.setState({value: event.target.value})\n  }\n}<\/code><\/pre>\n
Hooks\u306euseState\u3092\u4f7f\u3046\u3068\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u3053\u3093\u306a\u611f\u3058\u3067\u66f8\u304f\u3053\u3068\u304c\u3067\u304d\u3066\u3001
\nstate\u306b\u5f15\u6570\u3067\u6e21\u3057\u305f\u30c7\u30d5\u30a9\u30eb\u30c8\u3001setValue\u306bstate\u3092\u66f4\u65b0\u3067\u304d\u308b\u95a2\u6570\u304c\u8fd4\u3063\u3066\u304d\u307e\u3059\u3002<\/p>\n
const App = () => {\n  const [state, setValue] = useState(defaultState);\n}<\/code><\/pre>\n
\u305d\u306e\u4ed6\u306eHook<\/h1>\n
useEffect<\/h2>\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30de\u30a6\u30f3\u30c8\/\u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u6642\u306b\u306b\u30c7\u30fc\u30bf\u3092\u53d6\u3063\u3066\u304f\u308b\u3068\u304d\u306b\u3001class component\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u3067\u306f
\n\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3084\u3063\u3066\u3044\u305f\u306e\u3092<\/p>\n
class App extends React.Component {\n  <!-- \u30de\u30a6\u30f3\u30c8\u6642\u306b\u3057\u305f\u3044\u51e6\u7406 -->\n  componentDidMount() {\n    setValue();\n  }\n  <!--\u3000\u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u6642\u306b\u3057\u305f\u3044\u51e6\u7406 -->\n  componentWillUnMount() {\n    cleanUp();\n  }\n  <!-- \u66f4\u65b0\u6642 -->\n  componentDidUpdate() {\n    cleaUp();\n    setValue();\n  }\n}<\/code><\/pre>\n
useEffect\u3092\u4f7f\u3046\u3068\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u3053\u3046\u66f8\u3051\u3066\u3001\u8a18\u8ff0\u91cf\u3082\u6e1b\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
const App => {\n  useEffect(() => {\n    setValue();\n    return () => {\n      cleanUp();\n    }\n  });\n}<\/code><\/pre>\n
useReducer<\/h2>\n
\u8907\u6570\u306e\u5024\u306b\u3064\u3044\u3066state\u3092\u66f4\u65b0\u3057\u305f\u308a\u3001\u4eca\u306estate\u306e\u5024\u3092\u307f\u305f\u3044\u5834\u5408\u306a\u3069\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306breducer\u95a2\u6570\u3092\u7528\u610f\u3057\u305f\u4e0a\u3067\u3001
\nuseReducer\u3092\u4f7f\u3046\u3068\u3001type\u306b\u3088\u3063\u3066\u52d5\u4f5c\u3092\u5207\u308a\u66ff\u3048\u308bdispatch\u95a2\u6570\u304c\u8fd4\u3055\u308c\u307e\u3059\u3002useState\u306e\u5fdc\u7528\u307f\u305f\u3044\u306a\u611f\u3058\u3067\u3059\u306d\u3002
\n\u3053\u306e\u8fba\u308a\u306f\u696d\u52d9\u3067\u4f7f\u3063\u3066\u3044\u308bNuxt.js\u306eVuex\u306b\u4f3c\u3066\u3044\u305f\u306e\u3067\u3001\u99b4\u67d3\u307f\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n
const reducer = (state, action) => {\n  switch (action.type) {\n    case "request":\n      return {\n        ...state,\n        fetching: true,\n        errorMessage: null,\n      };\n    case "success":\n      return {\n        ...state,\n        fetching: false,\n        movies: action.payload\n      }\n    default:\n      return state;\n  }\n}\nconst App = () => {\n  const [state, dispatch] = useReducer(reducer, defaultState);\n\n  dispatch({\n    type: "requesst",\n    payload: result.item\n  })\n\n  result = fetch();\n\n  dispatch({\n    type: "success",\n    payload: result.item\n  })\n}<\/code><\/pre>\n
\u307e\u3068\u3081<\/h1>\n
\u4fbf\u5229\u306aHook\u3067\u3059\u304c\u3001state\u306b\u3069\u306e\u3088\u3046\u306b\u52d5\u4f5c\u3057\u3066\u3044\u308b\u306e\u304b\u306f\u3061\u3087\u3063\u3068\u6c17\u306b\u306a\u308a\u307e\u3059\u3002
\n\u30d5\u30c3\u30af\u306e\u30eb\u30fc\u30eb<\/a>
\n\u3053\u3061\u3089\u306b\u3055\u3089\u306b\u8a73\u3057\u3044\u3053\u3068\u304c\u66f8\u3044\u3066\u3042\u308b\u3088\u3046\u306a\u306e\u3067\u3001\u6c17\u306b\u306a\u308b\u65b9\u306f\u76ee\u3092\u901a\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u53c2\u8003\uff1a
\nhttps:\/\/reactjs.org\/docs\/hooks-reference.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u3053\u3093\u306b\u3061\u306f\u3001\u571f\u5c45\u3067\u3059\u3002\u8d64\u3061\u3083\u3093\u304c\u3069\u3093\u3069\u3093\u91cd\u304f\u306a\u3063\u3066\u304d\u3066\u3001\u3057\u3070\u3089\u304f\u62b1\u3063\u3053\u3057\u3066\u3044\u308b\u3068\u304b\u306a\u308a\u30ba\u30c3\u30b7\u30ea\u304d\u307e\u3059\u304c\u3001\u305d\u306e\u5206\u6210\u9577\u3092\u5b9f\u611f\u3057\u3066\u3044\u307e\u3059\u3002 Hooks React\u306eHooks\u6a5f\u80fd\u304c16.8.0\u3088\u308a\u6b63\u5f0f\u7248\u306b\u306a\u308a\u307e\u3057\u305f\u304c\u3000\u3001\u5b9f\u306f\u307e\u3060\u4f7f\u3063\u305f\u3053\u3068\u306a\u304b\u3063\u305f\u306e\u3067\u3061\u3087\u3063\u3068\u89e6\u3063\u3066\u307f\u307e\u3057\u305f\u3002Hooks\u3092\u4f7f\u3048\u3070\u3001class\u3092\u66f8\u304f\u3053\u3068\u306a\u304fstate\u3092\u7528\u3044\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u3067\u3059\u3002 Hooks\u3068\u306f? class componen […]<\/p>\n","protected":false},"author":11,"featured_media":826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,7],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/posts\/597"}],"collection":[{"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/comments?post=597"}],"version-history":[{"count":0,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/posts\/597\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/media\/826"}],"wp:attachment":[{"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/media?parent=597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/categories?post=597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/tags?post=597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}