Advanced React

生命周期

React 16 Lifecycle Methods: How and When to Use Them

`constructor`

The first thing that gets called is your component constructor.

Most Common Use Case For Constructor: Setting up state, creating refs and method binding.

`getDerivedStateFromProps`

When mounting, getDerivedStateFromProps is the last method called before rendering. You can use it to set state according to the initial props.

Most Common Use Case For getDerivedStateFromProps (during mount): Updating state based on props, when the props themselves aren’t enough.

`render`

Most Common Use Case For Render: Returning component JSX.

`componentDidMount`

After we’ve rendered our component for the first time, this method is called.

Most Common Use Case for componentDidMount: Starting AJAX calls to load in data for your component.

`shouldComponentUpdate`

shouldComponentUpdate allows us to say: only update if the props you care about change.

Most Common Use Case: Controlling exactly when your component will re-render.

`getSnapshotBeforeUpdate`

It’s called between render and the updated component actually being propagated to the DOM.

Most Common Use Case: Taking a look at some attribute of the current DOM, and passing that value on to componentDidUpdate.

`componentDidUpdate`

Most Common Use Case for componentDidUpdate: Reacting to committed changes to the DOM.

`componentWillUnmount`

Most Common Use Case for componentWillUnmount: Cleaning up any leftover debris from your component.

HOC

Render Props

Render Props – React

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

Immutable

Immutability in React and Redux: The Complete Guide

Hooks

Hooks 的作用：
Hooks allow you to reuse stateful logic without changing your component hierarchy.
Hooks are a way to reuse stateful logic, not state itself.
Hooks let you use more of React’s features without classes.
Hooks let us split the code based on what it is doing rather than a lifecycle method name.

背景

React doesn’t offer a way to “attach” reusable behavior to a component.
Introducing Hooks – React

什么时候使用 Hook ?

If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.

类似方案

Render Props – React
Higher-Order Components – React

`useState` vs `this.state`

Using the State Hook – React

`useEffect` vs lifecycles

Rules of Hooks

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks.)

State Hook

用法

Declaring a State Variable

import React, { useState } from 'react';

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

The only argument to the useState() Hook is the initial state.

It returns a pair of values: the current state and a function that updates it.

Reading State

class:

1	<p>You clicked {this.state.count} times</p>

function:

1	<p>You clicked {count} times</p>

Updating State

class:

1
2
3

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
  Click me
</button>

function:

1
2
3

<button onClick={() => setCount(count + 1)}>
  Click me
</button>

Effect Hook

useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

Tips

You can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Side Effect

Data fetching, subscriptions, or manually changing the DOM from React components. We call these operations “side effects”. because they can affect other components and can’t be done during rendering.

There are two common kinds of side effects in React components: those that don’t require cleanup, and those that do.

Compare Classes

In React class components, the render method itself shouldn’t cause side effects. It would be too early — we typically want to perform our effects after React has updated the DOM.

We put side effects into componentDidMount and componentDidUpdate.

Example Using Hooks

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

What does useEffect do?
Tell React that your component needs to do something after render.

Why is useEffect called inside a component?
Placing useEffect inside the component lets us access the count state variable (or any props) right from the effect.

Does useEffect run after every render?
Yes! By default. But you can customize this.

Effects with Cleanup

有些情况下我们需要清除 sideEffect。在 Classes 的写法中，我们在 componentWillUnmount 中处理该逻辑。

Hook 的写法：

If your effect returns a function, React will run it when it is time to clean up:

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

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

Why did we return a function from our effect?
This is the optional cleanup mechanism for effects.

When exactly does React clean up an effect?
React performs the cleanup when the component unmounts.
However, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time.

Tips

使用多个 `useEffect`

可以将不同的逻辑分别在不同的 useEffect 中处理，而不必像生命周期的写法将它们揉在一起。

Why Effects Run on Each Update

You might be wondering why the effect cleanup phase happens after every re-render.

Explanation: Why Effects Run on Each Update

Optimizing Performance by Skipping Effects

Building Your Own Hooks

Middleware

Redux

redux-thunk

redux-saga

Fiber

CSS in React

Modular CSS with React - Philippe Masset - Medium
4. Four ways to style react components - codeburst
5 Ways to Style React Components in 2019 - Bits and Pieces

生命周期

constructor

getDerivedStateFromProps

render

componentDidMount

shouldComponentUpdate

getSnapshotBeforeUpdate

componentDidUpdate

componentWillUnmount

HOC

Render Props

Immutable

Hooks

背景

什么时候使用 Hook ?

类似方案

useState vs this.state

useEffect vs lifecycles

Rules of Hooks

State Hook

用法

Declaring a State Variable

Reading State

Updating State

Effect Hook

Tips

Side Effect

Compare Classes

Example Using Hooks

Effects with Cleanup

Hook 的写法：

Tips

使用多个 useEffect

Why Effects Run on Each Update

Optimizing Performance by Skipping Effects

Building Your Own Hooks

Middleware

Redux

redux-thunk

redux-saga

Fiber

CSS in React

相关链接

`constructor`

`getDerivedStateFromProps`

`render`

`componentDidMount`

`shouldComponentUpdate`

`getSnapshotBeforeUpdate`

`componentDidUpdate`

`componentWillUnmount`

`useState` vs `this.state`

`useEffect` vs lifecycles

使用多个 `useEffect`