xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

React Hooks

Hooks are a new addition in React 16.8

const [state, setState] = useState(initialState);

setState(newState);

https://reactjs.org/docs/hooks-intro.html

https://reactjs.org/docs/hooks-overview.html

https://reactjs.org/docs/hooks-reference.html

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Advanced

https://reactjs.org/docs/hooks-custom.html

fetch data

React Hooks

https://mp.weixin.qq.com/s/P4XNhlBgKTyhtPXX4RB36w

---

React Component Lifecycle

bug

https://user-images.githubusercontent.com/7291672/64014657-43b36600-cb55-11e9-9f6b-708bd61f8585.png

OK

old API

---

https://reactjs.org/docs/react-component.html

https://reactjs.org/docs/state-and-lifecycle.html

Interactive React Lifecycle Methods diagram

new API

---

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

https://github.com/wojtekmaj/react-lifecycle-methods-diagram

---

React Hooks In Practice

React useEffect

https://reactjs.org/docs/hooks-effect.html

https://reactjs.org/docs/hooks-reference.html

---