React Hooks 核心機制與效能優化 應用 State 與 Effect 實戰範例提升高品質開發效率

// 使用 connect 的寫法
const mapStateToProps = (state) => ({
  counter: state.myState,
});

export default connect(mapStateToProps)(App);

// 使用 hook 的寫法
const counter = useSelector((state) => state.myState);

// class setState 實際上做的事情
this.setState({ ...state, value: 0 });

//  setHookState 其實就是單純設定
const [state, setHookState] = useState(0);
setHookState();

function shallowEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (let key of keys1) {
    if (object1[key] !== object2[key]) {
      return false;
    }
  }
  return true;
}

const hero1 = {
  name: "Batman",
  address: {
    city: "Gotham",
  },
};
const hero2 = {
  name: "Batman",
  address: {
    city: "Gotham",
  },
};
// 兩層
shallowEqual(hero1, hero2); // => false

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  function reset() {
    setCount(0);
  }

  function getValue() {
    return count;
  }

  return (
    <div>
      <button type="button" onClick={increment}>
        add
      </button>
      <button type="button" onClick={reset}>
        reset
      </button>
      <span>{getValue()}</span>
    </div>
  );
}

// componentDidMount
useEffect(() => {}, []);

// componentDidUpdate
useEffect(() => {
  const subscription = props.source.subscribe();
}, [props.source]);

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // componentWillUnMount
    subscription.unsubscribe();
  };
}, [props.source]);

async componentDidMount() {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users`)
    this.setState({ users: response.data })
};

async componentDidUpdate(prevProps) {
  if (prevProps.resource !== this.props.resource) {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users`)
    this.setState({ users: response.data })
  }
};

const fetchUsers = async () => {
  const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);

  setUsers(response.data);
};

useEffect( () => { fetchUsers(users) }, [ users ] );

function useCounter(initial) {
  const [count, setCount] = useState(initial);
  const increment = () => setCount(count + 1);
  const reset = () => setCount(0);
  return { reset, count, increment };
}

function Counter() {
    const [reset, count, increment] = useCounter(0);

    return (
    <div>
        <button type="button" onClick={increment}>add</button>
        <button type="button" onClick={reset}>reset</button>
        <span>{count)}</span>
    </div>
    );
}

useEffect(() => {
  fetchData();
  updateCloumn();
}, []);

useEffect(() => {
  let controller = new AbortController();
  (async () => {
    try {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts`,
        {
          signal: controller.signal,
        }
      );
      setList(await response.json());
      controller = null;
    } catch (e) {
      // Handle the error
    }
  })();
  // aborts the request when the component umounts
  return () => controller?.abort();
});

useEffect(() => {
  let timerId = setTimeout(() => {
    timerId = null;
    setList([]);
  }, 1000);
  return () => clearTimeout(timerId);
});

useEffect(() => {
  const webSocket = new WebSocket(url);

  return () => webSocket.close();
});

const [isLoading, setLoading] = useState(true);
const [list, setlist] = useState([]);
useEffect(async () => {
  fetch("/list")
    .then((res) => res.json())
    .then((data) => {
      setlist(data);
      setLoading(false);
    });
}, []);

setStateOnce({
  list: data,
  isLoading: false,
});

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount((c) => c + 1); // Does not re-render yet
    setFlag((f) => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // React 17 and earlier does NOT batch these because
      // they run *after* the event in a callback, not *during* it
      setCount((c) => c + 1); // Causes a re-render
      setFlag((f) => !f); // Causes a re-render
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}