React 进阶面试题, React Hooks

Step 1

Q:: What are React Hooks?

A:: React Hooks are functions that let you use state and other React features without writing a class. They were introduced in React 16.8 and are essential for writing functional components with state and side effects.

Step 2

Q:: Explain the useState Hook with an example.

A:: The useState Hook allows you to add state to functional components. It returns an array with two elements: the current state value and a function to update it. For example:

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

This snippet initializes a state variable count with a value of 0 and provides a function setCount to update its value.

Step 3

Q:: What is the useEffect Hook and how does it work?

A:: The useEffect Hook allows you to perform side effects in function components. It is similar to lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components. The useEffect function takes two arguments: a function that contains the side effect logic and an optional array of dependencies. When any of the dependencies change, the effect runs again. For example:

 
useEffect(() => {
  // Side effect logic here
}, [dependency]);
 

Step 4

Q:: Can you explain the concept of the dependency array in useEffect?

A:: The dependency array in useEffect is an optional second argument that tells React when to re-run the effect. If you pass an empty array, the effect runs only once after the initial render. If you pass a non-empty array, the effect runs whenever any value in the array changes. If no array is provided, the effect runs after every render.

Step 5

Q:: What are custom Hooks in React? How do you create one?

A:: Custom Hooks are reusable functions in React that allow you to share logic between components. They start with the word 'use' and can call other Hooks. To create a custom Hook, simply write a function that uses built-in Hooks and returns values or functions that can be used by components. For example:

 
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });
 
  const setValue = value => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };
 
  return [storedValue, setValue];
}
 

Step 1

Q:: What are React Hooks?

A:: React Hooks are functions that let you use state and other React features in functional components. They allow you to reuse stateful logic without changing the component hierarchy. Hooks were introduced in React 16.8 and include functions like useState, useEffect, useContext, and more.

Step 2

Q:: Explain useState and provide an example of its usage.

A:: useState is a Hook that allows you to add state to a functional component. It returns a pair: the current state value and a function that lets you update it. Example:

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

This will increment the count state by 1.

Step 3

Q:: How does useEffect work and when would you use it?

A:: useEffect is a Hook that lets you perform side effects in function components. It's similar to lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components. You use useEffect for tasks such as fetching data, subscribing to events, or manually changing the DOM. Example:

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

This effect only runs when the count state changes.

Step 4

Q:: What is the purpose of useContext?

A:: useContext is a Hook that allows you to access the value of a context directly in a functional component. It avoids the need to use Context.Consumer and provides a cleaner, more readable way to consume context values. Example:

 
const value = useContext(MyContext);
 

This retrieves the current value of MyContext``.

Step 5

Q:: How would you handle side effects like data fetching in a functional component?

A:: To handle side effects like data fetching, you can use the useEffect Hook. For example:

 
useEffect(() => {
  async function fetchData() {
    const response = await fetch('api/data');
    const data = await response.json();
    setData(data);
  }
  fetchData();
}, []);
 

This effect runs once when the component mounts and fetches data from the API.

Step 6

Q:: What are the benefits of using React Hooks over class components?

A:: React Hooks simplify code by eliminating the need for lifecycle methods and this keyword, making components easier to read and test. Hooks also enable better code reuse through custom hooks and can reduce the complexity associated with stateful logic and side effects in large components.

Step 1

Q:: What is React and why would you use it?

A:: React is a JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React allows developers to build web applications that can update and render efficiently in response to data changes. React’s declarative approach makes it easier to reason about your application, and the component-based structure promotes reusability and organization of UI code.

Step 2

Q:: What are React Hooks?

A:: React Hooks are functions that let you use state and other React features without writing a class. They were introduced in React 16.8. The most commonly used Hooks are useState for managing state, useEffect for handling side effects, and useContext for consuming context within a function component. Hooks allow you to reuse stateful logic without changing your component hierarchy.

Step 3

Q:: Explain the useState Hook and provide an example of its usage.

A:: The useState Hook is used to add state to functional components. It returns a pair: the current state value and a function that allows you to update it. Example usage:

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

Here, count is the state variable, and setCount is the function used to update the state. Initially, count is set to 0. When setCount is called with a new value, the component re-renders with the updated state.

Step 4

Q:: What is the useEffect Hook and when would you use it?

A:: The useEffect Hook allows you to perform side effects in function components. It’s equivalent to the lifecycle methods componentDidMount``, componentDidUpdate``, and componentWillUnmount in class components. You would use useEffect for tasks such as data fetching, setting up a subscription, and manually changing the DOM in React components. It takes two arguments: a function that contains the side effect logic, and an optional array of dependencies that control when the effect is re-executed.

Step 5

Q:: What are React components, and how are they different from elements?

A:: React components are independent, reusable pieces of UI. A component can be a function or a class that optionally accepts inputs (props) and returns a React element describing how a section of the UI should appear. React elements, on the other hand, are the smallest building blocks in React applications, representing what you see on the screen. Components can be composed using elements, making them more powerful and flexible.