Home >Web Front-end >JS Tutorial >Main concept of react || React

Main concept of react || React

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-19 12:03:03245browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn