Main concept of react || React

In React.js, there are several methods available for managing components, handling lifecycle events, and working with hooks. Below, I've categorized the most important methods into different sections:

1. Component Lifecycle Methods (Class Components)

In React class components, there are several lifecycle methods that you can override to run code at specific times in a component's life cycle:

Mounting Phase (initializing a component)

• constructor()

  • Called before the component is mounted.
  • Useful for initializing state or binding event handlers.

• static getDerivedStateFromProps(props, state)

  • Called before rendering, both on the initial mount and on subsequent updates.
  • Allows the state to be updated based on props.

• render()

  • The only required method in a class component.
  • Should return React elements, which will be rendered to the DOM.

• componentDidMount()

  • Called immediately after a component is mounted.
  • Commonly used for fetching data, setting up subscriptions, or making API calls.

Updating Phase (re-rendering due to changes in props or state)

• static getDerivedStateFromProps(props, state)

  • (Also called during updates) Used to update state based on props.

• shouldComponentUpdate(nextProps, nextState)

  • Determines if a re-render is necessary.
  • Can be used to optimize performance by preventing unnecessary renders.

• render()

  • (Called again during updates)

• getSnapshotBeforeUpdate(prevProps, prevState)

  • Called right before changes from the virtual DOM are applied to the actual DOM.
  • Useful for capturing information (like scroll position) before updates.

• componentDidUpdate(prevProps, prevState, snapshot)

  • Called immediately after updating occurs.
  • Useful for performing operations after the component has been updated (e.g., making API calls based on prop changes).

Unmounting Phase (cleaning up before a component is removed)

• componentWillUnmount()
  • Called just before a component is unmounted and destroyed.
  • Useful for cleaning up subscriptions, timers, or event listeners.

Error Handling

• componentDidCatch(error, info)
  • Called if there is an error during rendering, in a lifecycle method, or in the constructor of any child component.
  • Useful for logging errors and displaying fallback UI.

2. React Hooks (Function Components)

Hooks are a new addition in React 16.8 that let you use state and other React features without writing a class.

Basic Hooks

• useState(initialState)
  • Allows you to add state to a functional component.
  • Returns a state variable and a function to update it.

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

• useEffect(callback, dependencies)
  • Similar to componentDidMount, componentDidUpdate, and componentWillUnmount combined.
  • Used for side effects like data fetching, subscriptions, or manually changing the DOM.

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

• useContext(Context)
  • Allows you to subscribe to React context without nesting Consumer components.

  const value = useContext(MyContext);

Additional Hooks

• useReducer(reducer, initialState)
  • An alternative to useState for managing more complex state logic.

  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback(callback, dependencies)
  • Returns a memoized version of a callback function, useful for optimizing child components that rely on reference equality.

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);

• useMemo(create, dependencies)
  • Returns a memoized value, used for optimizing expensive calculations.

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef(initialValue)
  • Returns a mutable ref object, which persists between renders.
  • Useful for accessing DOM elements or storing mutable values.

  const inputRef = useRef();

• useImperativeHandle(ref, createHandle, dependencies)
  • Customizes the instance value that is exposed when using ref with forwardRef.

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

• useLayoutEffect(callback, dependencies)

  • Similar to useEffect, but fires synchronously after all DOM mutations.
  • Useful for reading layout from the DOM and synchronously re-rendering.

• useDebugValue(value)

  • Can be used to display a label in React DevTools for custom hooks.

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

3. Event Handling Methods

React provides methods for handling events, similar to regular DOM event handling, but with some differences:

• onClick
• onChange
• onSubmit
• onFocus
• onBlur
• onKeyPress

Example:

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

4. Other React Methods

These are additional methods you may find useful:

• React.createRef()

  • Used to create refs in class components.

• React.forwardRef()

  • Pass refs to child components.

• React.memo(Component)

  • A higher-order component that prevents re-rendering if props haven't changed.

• React.lazy()

  • Used for code-splitting and lazy loading components.

• React.Suspense

  • Used in combination with React.lazy() to show a fallback while loading a lazy component.

5. React Router Methods (for Routing)

• useNavigate() (React Router v6)
• useParams()
• useLocation()
• useMatch()

Example:

  const value = useContext(MyContext);

6. Prop Types and Default Props

• propTypes

  • Used to validate the type of props passed to a component.

• defaultProps

  • Used to set default values for props.

Example:

  const [state, dispatch] = useReducer(reducer, initialState);

Conclusion

• Class components are more traditional and use lifecycle methods.
• Functional components leverage hooks and are generally preferred in modern React development due to their simplicity and performance benefits.

Use class components when you need fine-grained control over component lifecycle and hooks when you want a simpler and cleaner API.

The above is the detailed content of Main concept of react || React. For more information, please follow other related articles on the PHP Chinese website!