【React】精选5题

1. React构建组件的方式有哪些？有什么区别？

React构建组件的方式有两种：函数组件和类组件。

• 函数组件：使用函数来定义组件，函数接收props作为参数，并返回一个React元素作为组件的输出。函数组件通常是无状态的，只负责根据传入的props渲染UI。函数组件没有自己的状态和生命周期方法。
  示例：

function MyComponent(props) {
  return <div>{props.name}</div>;
}

• 类组件：使用ES6的类来定义组件，类继承自React.Component，通过定义render方法来返回组件的UI。类组件通常有自己的状态，可以通过setState方法来更新状态，并且可以定义生命周期方法来处理组件的生命周期事件。
  示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: props.name };
  }

  render() {
    return <div>{this.state.name}</div>;
  }
}

区别：
函数组件比类组件更简洁，没有繁琐的生命周期和状态管理，适用于简单的UI组件。
类组件可以拥有自己的状态和生命周期方法，更适合复杂的交互逻辑和数据管理。

扩展：hooks是什么时候支持的？

React Hooks是在React 16.8版本中引入的。它是一种新的React特性，可以让函数组件具有类组件的一些特性，比如状态管理和生命周期方法。在React 16.8之前，函数组件只能接收props作为输入，无法维护自己的状态，也无法使用生命周期方法。
React Hooks的引入，让函数组件更加灵活和强大，能够完成更多的任务，比如全局状态管理、生命周期方法、副作用等。由于React Hooks的出现，现在函数组件已经成为开发React应用的主要方式之一。

2. 在react中怎么实现组件间的过渡动画？

在React中实现组件间的过渡动画有多种方式，以下是其中几种常见的方法

• 1. CSS过渡动画：使用CSS过渡属性（如transition）和类名切换来实现过渡效果。在组件的CSS样式中定义过渡的属性和动画效果，通过切换组件的类名来触发过渡动画。
     示例：

// CSS样式
.transition {
  transition: opacity 0.5s;
}
.fade-in {
  opacity: 1;
}
.fade-out {
  opacity: 0;
}

// React组件
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isShown: false };
  }

  toggle() {
    this.setState(prevState => ({ isShown: !prevState.isShown }));
  }

  render() {
    return (
      <div>
        <button onClick={() => this.toggle()}>Toggle</button>
        <div className={`transition ${this.state.isShown ? 'fade-in' : 'fade-out'}`}>
          Content
        </div>
      </div>
    );
  }
}

• 2. React Transition Group库：React Transition Group是一个第三方库，提供了一些组件和工具来实现过渡动画。它基于React的生命周期方法和CSS过渡，可以实现更复杂的过渡效果和动画控制。
     示例：

import { CSSTransition } from 'react-transition-group';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isShown: false };
  }

  toggle() {
    this.setState(prevState => ({ isShown: !prevState.isShown }));
  }

  render() {
    return (
      <div>
        <button onClick={() => this.toggle()}>Toggle</button>
        <CSSTransition
          in={this.state.isShown}
          timeout={500}
          classNames="fade"
          unmountOnExit
        >
          <div>Content</div>
        </CSSTransition>
      </div>
    );
  }
}

• 3. React Spring库：React Spring是另一个用于实现过渡动画的第三方库，它使用物理引擎来计算动画效果，提供了更高级和复杂的过渡效果。
     示例：

import { useTransition, animated } from 'react-spring';

function MyComponent() {
  const [isShown, toggle] = useState(false);

  const transitions = useTransition(isShown, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
  });

  return (
    <div>
      <button onClick={() => toggle(!isShown)}>Toggle</button>
      {transitions.map(({ item, key, props }) => (
        item && <animated.div key={key} style={props}>Content</animated.div>
      ))}
    </div>
  );
}

以上是一些常见的实现组件间过渡动画的方法，具体使用哪种方法取决于你的需求和个人偏好。

3. 说说你对Redux的理解？其工作原理？

Redux概念&原理：

Redux是一种用于JavaScript应用程序状态管理的开源库。它通过提供一个可预测的状态容器和一套规范化的操作方法，帮助开发者管理复杂的应用程序状态，并使状态的变化可追踪和可调试。

Redux的工作原理可以概括为以下几个核心概念：

1. Store（存储）：应用程序的整个状态被存储在一个单一的JavaScript对象中，称为Store。它是应用程序状态的唯一数据源，并且只能通过特定的方式来修改。

2. Action（动作）：通过Action来描述状态的变化。它是一个普通的JavaScript对象，包含一个type字段来描述动作的类型，以及可选的payload字段来携带数据。

3. Reducer（归约器）：Reducer是一个纯函数，接收当前的状态和Action作为输入，并返回一个新的状态。Reducer负责根据Action的类型来更新状态，它会生成一个全新的状态对象，而不是修改原始状态对象。

4. Dispatch（派发）：通过调用dispatch方法，将Action传递给Reducer，以触发状态的变化。dispatch方法是Redux提供的一个函数，用于将Action发送给Reducer。

5. Subscribe（订阅）：通过调用subscribe方法，可以注册一个监听器，监听状态的变化。当状态发生变化时，Redux会自动调用所有注册的监听器，以便更新应用程序的UI。

Redux的工作流程可以描述为：首先用户触发一个Action，通过调用dispatch方法将Action发送给Reducer；Reducer根据Action的类型来更新状态；当状态发生变化时，Redux调用所有注册的监听器来更新UI。

通过这种方式，Redux实现了单向数据流和可预测的状态管理，帮助开发者更好地组织和管理应用程序的状态。

Redux用法

1. 安装Redux：使用npm或yarn安装Redux库。

npm install redux

2. 创建一个Reducer：使用纯函数来定义应用程序的状态变化逻辑。Reducer接收当前的状态和Action作为输入，并返回一个新的状态

// 定义初始状态
const initialState = {
  count: 0,
};

// 创建Reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

3. 创建一个Store：使用createStore函数来创建一个Redux的Store，并将Reducer传递给它。

import { createStore } from 'redux';

// 创建Store
const store = createStore(reducer);

4. 访问状态：通过getState方法来获取当前的应用程序状态。

console.log(store.getState()); // 输出 { count: 0 }

5. 分发Action：使用dispatch方法来分发一个Action，触发状态的变化。

// 分发INCREMENT动作
store.dispatch({ type: 'INCREMENT' });

// 分发DECREMENT动作
store.dispatch({ type: 'DECREMENT' });

6. 监听状态变化：通过subscribe方法来注册一个监听器，监听状态的变化。

// 注册监听器
const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

// 之后，每当状态发生变化时，会自动调用监听器

7. 取消监听：调用unsubscribe方法以取消监听状态的变化。

unsubscribe();

这些是Redux的基本用法。除此之外，还可以使用Redux的中间件（如redux-thunk、redux-saga）来处理异步操作，使用combineReducers函数来组合多个Reducer，使用Provider组件将Redux的Store传递给整个应用程序等。这些进一步扩展了Redux的功能和灵活性。

优化：抽离reducer

基于上面的写法，可以将创建Redux的Store的过程抽离到一个单独的文件中，以便在其他模块中使用。具体步骤如下：

1. 在一个单独的文件中创建一个Reducer，如counterReducer.js。

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default counterReducer;

2. 在一个单独的文件中创建Redux的Store，如store.js。

import { createStore } from 'redux';
import counterReducer from './counterReducer';

const store = createStore(counterReducer);

export default store;

3. 在其他模块中使用Redux的Store。

import store from './store';

// 获取当前状态
console.log(store.getState());

// 分发一个Action
store.dispatch({ type: 'INCREMENT' });

// 注册一个监听器
const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

// 取消监听
unsubscribe();

这样，就可以将Redux的Store和Reducer抽离到单独的文件中，提高了代码的可维护性和可拓展性。同时，在其他模块中可以轻松地使用Redux的Store来管理应用程序的状态。

什么时候分发action？

在Redux中，Action通常表示应用程序中的一些事件或更改，例如用户交互、网络请求、定时器等。当发生这些事件时，我们需要将相应的Action分发给Redux的Store，以触发状态的变化。

具体来说，以下情况通常需要分发Action：

1. 用户交互：当用户执行某些操作时，例如点击按钮、输入文本等，可以分发相应的Action。

// 点击按钮时分发INCREMENT动作
<button onClick={() => store.dispatch({ type: 'INCREMENT' })}>+</button>

2. 网络请求：当应用程序需要向后端发送请求或接收响应时，可以分发网络请求相关的Action。

// 发起网络请求时分发FETCH动作
store.dispatch({ type: 'FETCH', payload: { url: 'https://api.example.com' } });

3. 定时器：当应用程序需要定时执行某些任务时，可以分发定时器相关的Action。

// 每秒分发一个INCREMENT动作
setInterval(() => {
  store.dispatch({ type: 'INCREMENT' });
}, 1000);

需要注意的是，在分发Action时，必须使用纯JavaScript对象作为Action。这些对象通常包含一个type字段，用于描述Action的类型，以及可选的payload字段，用于携带Action的附加数据。

总之，分发Action的时机和方式取决于应用程序的具体需求。通常需要结合应用程序的业务逻辑、用户交互、网络请求等因素来决定何时分发Action。

payload中的参数如何获取

在Redux中，Action中的payload字段通常用于携带Action的附加数据。当我们需要获取Action中的payload参数时，可以在Reducer中对应的Action处理函数中获取。

具体来说，可以通过Action对象的payload字段来获取Action中的参数。例如，下面是一个根据Action类型更新状态的Reducer，其中INCREMENT和DECREMENT动作都携带了一个value参数：

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + action.payload.value,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - action.payload.value,
      };
    default:
      return state;
  }
};

export default counterReducer;

在上面的代码中，当分发INCREMENT或DECREMENT动作时，Reducer会将当前状态中的count属性加上Action的value参数，实现了状态的更新。

下面是一个使用dispatch方法分发Action的例子，可以看到在Action对象中传入了payload参数：

// 分发INCREMENT动作，携带value参数
store.dispatch({ type: 'INCREMENT', payload: { value: 1 } });

在Reducer中，可以通过action.payload.value来获取Action中的value参数，从而实现状态的更新。

需要注意的是，payload参数是可选的，如果Action没有携带payload参数，那么获取payload参数时可能会出现未定义的情况，需要进行判断。例如：

case 'SOME_ACTION':
  if (action.payload) {
    // 获取Action中的payload参数
    const { value } = action.payload;
    // ...
  }
  return state;

总之，在Redux中，Action中的payload参数通常用于携带Action的附加数据，我们可以在Reducer中通过action.payload来获取这些参数，从而对应用程序的状态进行更新

扩展：useReducer 是什么？

useReducer是React提供的一个Hooks函数，用于在函数组件中管理局部状态。它接收一个Reducer函数和初始状态，返回一个包含当前状态和dispatch函数的数组，可以帮助我们处理复杂的状态逻辑。

useReducer的原理类似于Redux中的Reducer函数。Reducer是一个纯函数，接收当前状态和Action作为输入，并返回一个新的状态。当我们需要更新状态时，可以通过dispatch函数分发一个Action，从而触发Reducer函数对状态进行更新。

useReducer的详细用法如下：

1. 导入useReducer函数。

import React, { useReducer } from 'react';

2. 定义Reducer函数。Reducer是一个纯函数，接收当前状态和Action作为输入，并返回一个新的状态。通常使用switch语句根据Action的类型来更新状态。

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

3. 使用useReducer函数，传入Reducer函数和初始状态。useReducer函数会返回一个包含当前状态和dispatch函数的数组。

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

4. 在组件中使用state和dispatch。state表示当前的状态，可以根据需要进行读取和展示。dispatch函数用于分发Action，从而触发状态的更新。

return (
  <div>
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    <span>{state.count}</span>
    <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
  </div>
);

在上述示例中，当点击"+“按钮时，会分发一个类型为’INCREMENT’的Action，Reducer函数会根据Action的类型更新状态。当点击”-"按钮时，会分发一个类型为’DECREMENT’的Action。

需要注意的是，使用useReducer函数时，通常需要定义一个Reducer函数来管理状态的更新。这种方式适用于复杂的状态逻辑，例如多个状态之间存在依赖关系、某些状态需要异步更新等情况。

总之，useReducer是React提供的一个Hooks函数，用于在函数组件中管理局部状态。它通过Reducer函数和dispatch方法，实现了状态的更新和管理。可以根据需要在组件中使用state和dispatch，从而实现状态的读取和分发。