react 函数组件面试常问

React 函数组件是 React 中的重要概念，以下是一些可能会在 React 函数组件面试中被问到的常见问题：

1. 什么是函数组件？
2. 函数组件和类组件有什么区别？
3. 什么是 hooks？
4. React 中有哪些常用的 hooks？
5. useState 和 setState 的区别是什么？
6. useEffect 的作用是什么？
7. 如何在函数组件中使用生命周期方法？
8. 如何在函数组件中使用 Ref？
9. 如何在函数组件中处理表单提交？
10. 如何在函数组件中处理异步数据请求？

当然，根据不同的公司和职位，面试官也可能会问到其他的问题。因此，为了更好地应对 React 函数组件面试，我们需要深入理解 React 函数组件以及常用的 hooks，并且不断练习和思考实际场景中的应用。

相关问题

react函数组件编写

React函数组件是一种纯粹的JavaScript函数，它接收一个props对象作为参数并返回一个React元素。以下是编写React函数组件的步骤：

1. 导入React库

首先要在代码中导入React库。我们可以使用ES6的import语句导入React库，也可以使用CommonJS的require语句导入React库。

import React from 'react';

或者

const React = require('react');

2. 创建函数组件

创建一个函数组件，它接收一个props对象作为参数，并返回一个React元素。你可以将这个组件的函数定义放在一个单独的文件中，或者在同一个文件中定义多个组件。

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

3. 导出函数组件

将函数组件导出，以便其他组件可以使用它。

export default MyComponent;

4. 使用函数组件

在其他组件中使用函数组件，传递props对象作为参数。

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent title="Hello, World!" description="This is my first React component." />
    </div>
  );
}

export default App;

这就是编写React函数组件的基本步骤。要注意的是，函数组件只能接收props对象作为参数，并且不能使用状态(state)或生命周期方法。如果需要使用状态或生命周期方法，应该使用类组件。

react函数组件传值

React 函数组件传值有两种方式：props 和 useContext。

1. 通过 props 传值

在函数组件中，可以通过 props 传递数据。父组件中声明一个属性，然后在子组件中使用这个属性即可传递数据。

例如：

function ParentComponent() {
  const data = 'hello world';
  return (
    <ChildComponent data={data} />
  );
}

function ChildComponent(props) {
  return (
    <div>{props.data}</div>
  );
}

2. 通过 useContext 传值

useContext 是 React 提供的一个 API，可以在组件之间共享数据。使用 useContext 后，可以在任何深度的组件中获取到共享的数据。

例如：

const DataContext = React.createContext();

function ParentComponent() {
  const data = 'hello world';
  return (
    <DataContext.Provider value={data}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

function ChildComponent() {
  const data = useContext(DataContext);
  return (
    <div>{data}</div>
  );
}

以上就是 React 函数组件传值的两种方式。如果传递的数据比较简单，可以使用 props；如果需要在多个组件中共享数据，可以使用 useContext。