React Hooks & React v16.8.6 All In One

React Hooks & React v16.8.6 All In One

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

1. old API

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

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

Interactive React Lifecycle Methods diagram

2. 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

cancel promise solution

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

https://github.com/facebook/react/issues/15006#issuecomment-543059930

  const { adcode, regions = [] } = regionData;
  const [regionName, setRegionName] = useState('all');
  const [tableData, setTableData] = useState(regions);
  useEffect(() => {
    let isSubscribed = true;
    // getRegionName(adcode).then(setRegionName);
    getRegionName(adcode).then(() => {
      if(isSubscribed) {
        return setRegionName;
      }}
    );
    const promises = [];
    regions.forEach(item => {
      promises.push(
        getRegionName(item.code)
        .then(name => {item.name = name;})
        // eslint-disable-next-line no-console
        .catch(() => console.log('error', item.code)),
      );
    });
    Promise
    .all(promises)
    .then(() => {
      if(isSubscribed) {
        return setTableData(regions.filter(({ name }) => !!name));
      }
    });
    return () => isSubscribed = false;
  }, [adcode, regionData, regions]);

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---