面试题：React表单验证条件渲染与性能优化及状态管理

Question

有一个大型的多步骤表单，包含多个字段及复杂的验证逻辑。比如某些字段的显示或隐藏依赖于其他字段的值，并且验证规则可能会根据用户角色动态变化。请阐述如何运用React的条件渲染、状态管理（如Redux或Mobx等）以及性能优化技巧（如shouldComponentUpdate或React.memo等）来高效实现该表单的验证及条件渲染功能。并给出关键代码示例。

Answer 1

1. 条件渲染

在 React 中，条件渲染可以通过多种方式实现。最常见的是使用 if 语句或三元表达式。

例如，根据某个字段的值来决定是否显示另一个字段：

import React from 'react';

const Form = ({ userInput }) => {
  return (
    <div>
      {userInput === 'yes' && <input type="text" placeholder="当输入为 yes 时显示" />}
    </div>
  );
};

export default Form;

2. 状态管理

Redux

• 安装依赖：npm install redux react-redux
• 创建 store：

// store.js
import { createStore } from'redux';

// 定义 reducer
const formReducer = (state = {}, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
      ...state,
        [action.field]: action.value
      };
    default:
      return state;
  }
};

const store = createStore(formReducer);

export default store;

• 连接组件到 store：

// Form.js
import React from'react';
import { useSelector, useDispatch } from'react-redux';

const Form = () => {
  const formData = useSelector(state => state);
  const dispatch = useDispatch();

  const handleChange = (e) => {
    dispatch({
      type: 'UPDATE_FIELD',
      field: e.target.name,
      value: e.target.value
    });
  };

  return (
    <div>
      <input type="text" name="username" onChange={handleChange} />
      <input type="password" name="password" onChange={handleChange} />
    </div>
  );
};

export default Form;

Mobx

• 安装依赖：npm install mobx mobx-react
• 创建 store：

// store.js
import { makeObservable, observable, action } from'mobx';

class FormStore {
  formData = {};

  constructor() {
    makeObservable(this, {
      formData: observable,
      updateField: action
    });
  }

  updateField = (field, value) => {
    this.formData[field] = value;
  };
}

const formStore = new FormStore();

export default formStore;

• 使用 store：

// Form.js
import React from'react';
import { observer } from'mobx-react';
import formStore from './store';

const Form = observer(() => {
  const handleChange = (e) => {
    formStore.updateField(e.target.name, e.target.value);
  };

  return (
    <div>
      <input type="text" name="username" onChange={handleChange} />
      <input type="password" name="password" onChange={handleChange} />
    </div>
  );
});

export default Form;

3. 性能优化

shouldComponentUpdate

在类组件中，可以通过重写 shouldComponentUpdate 方法来控制组件是否需要重新渲染。

import React, { Component } from'react';

class FormComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 只在特定字段变化时重新渲染
    return nextProps.formData.username!== this.props.formData.username;
  }

  render() {
    return (
      <div>
        <input type="text" name="username" value={this.props.formData.username} />
      </div>
    );
  }
}

export default FormComponent;

React.memo

对于函数组件，可以使用 React.memo 进行浅比较来优化性能。

import React from'react';

const FormField = React.memo(({ value }) => {
  return <input type="text" value={value} />;
});

export default FormField;

关键代码整合示例（以 Redux 为例）

// store.js
import { createStore } from'redux';

const formReducer = (state = {}, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
      ...state,
        [action.field]: action.value
      };
    case 'UPDATE_ROLE':
      return {
      ...state,
        role: action.role
      };
    default:
      return state;
  }
};

const store = createStore(formReducer);

export default store;

// Form.js
import React from'react';
import { useSelector, useDispatch } from'react-redux';

const Form = () => {
  const formData = useSelector(state => state);
  const dispatch = useDispatch();

  const handleChange = (e) => {
    dispatch({
      type: 'UPDATE_FIELD',
      field: e.target.name,
      value: e.target.value
    });
  };

  const handleRoleChange = (e) => {
    dispatch({
      type: 'UPDATE_ROLE',
      role: e.target.value
    });
  };

  return (
    <div>
      <input type="text" name="username" onChange={handleChange} />
      <select name="role" onChange={handleRoleChange}>
        <option value="admin">Admin</option>
        <option value="user">User</option>
      </select>
      {formData.role === 'admin' && <input type="text" name="adminOnlyField" onChange={handleChange} />}
    </div>
  );
};

export default Form;

// App.js
import React from'react';
import { Provider } from'react-redux';
import store from './store';
import Form from './Form';

const App = () => {
  return (
    <Provider store={store}>
      <Form />
    </Provider>
  );
};

export default App;

这样通过条件渲染、状态管理以及性能优化技巧，可以高效实现大型多步骤表单的验证及条件渲染功能。