【React】精选5题

原创已于 2023-08-31 15:54:50 修改 · 493 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2023-08-28 19:14:16 首次发布

web前端同时被 2 个专栏收录

75 篇文章

订阅专栏

react

22 篇文章

订阅专栏

本文围绕React展开，介绍了构建组件的函数和类两种方式及区别，阐述了在React中实现组件过渡动画的常见方法，讲解了Redux的概念、原理、用法及优化，还说明了在React项目中使用Redux的步骤和项目结构划分，最后分析了React render方法的原理和触发情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
    );
  }
}

1. 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>
    );
  }
}

1. 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的工作原理可以概括为以下几个核心概念：

Store（存储）：应用程序的整个状态被存储在一个单一的JavaScript对象中，称为Store。它是应用程序状态的唯一数据源，并且只能通过特定的方式来修改。
Action（动作）：通过Action来描述状态的变化。它是一个普通的JavaScript对象，包含一个type字段来描述动作的类型，以及可选的payload字段来携带数据。
Reducer（归约器）：Reducer是一个纯函数，接收当前的状态和Action作为输入，并返回一个新的状态。Reducer负责根据Action的类型来更新状态，它会生成一个全新的状态对象，而不是修改原始状态对象。
Dispatch（派发）：通过调用dispatch方法，将Action传递给Reducer，以触发状态的变化。dispatch方法是Redux提供的一个函数，用于将Action发送给Reducer。
Subscribe（订阅）：通过调用subscribe方法，可以注册一个监听器，监听状态的变化。当状态发生变化时，Redux会自动调用所有注册的监听器，以便更新应用程序的UI。

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

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

Redux用法

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

npm install redux

创建一个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;
  }
};

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

import { createStore } from 'redux';

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

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

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

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

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

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

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

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

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

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

unsubscribe();

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

优化：抽离reducer

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

在一个单独的文件中创建一个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;

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

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

const store = createStore(counterReducer);

export default store;

在其他模块中使用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：

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

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

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

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

定时器：当应用程序需要定时执行某些任务时，可以分发定时器相关的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的详细用法如下：

导入useReducer函数。

import React, { useReducer } from 'react';

定义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;
  }
};

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

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

在组件中使用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，从而实现状态的读取和分发。

4. 你在React项目中是如何使用Redux的? 项目结构是如何划分的？

在React项目中使用Redux的一般步骤如下：

安装Redux库：在项目根目录中运行npm install redux react-redux命令来安装Redux和React-Redux。
创建Redux的store：在项目中创建一个store.js文件，并使用createStore函数来创建Redux的store。例如：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

创建reducers：在项目中创建一个counterReducer.js和userReducer.js文件，并分别定义对应的reducer函数，处理对应的状态和行为。例如：

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

export default counterReducer;

const userReducer = (state = null, action) => {
  switch (action.type) {
    case 'SET_USER':
      return action.payload;
    default:
      return state;
  }
};

export default userReducer;

创建一个根reducers，上面的reducer合并，例如:

import { combineReducers } from 'redux';
import counterReducer from './counterReducer';
import userReducer from './userReducer';

const rootReducer = combineReducers({
  counter: counterReducer,
  user: userReducer,
});

export default rootReducer;

创建action creators：在项目中创建一个actions.js文件，并定义各个action creator函数，用于创建action对象。例如：

export const increment = () => {
  return {
    type: 'INCREMENT',
  };
};

export const setUser = (user) => {
  return {
    type: 'SET_USER',
    payload: user,
  };
};

在React组件中使用Redux：在需要使用Redux的组件中，可以使用connect函数将组件连接到Redux的store，并将需要的状态和action creators映射到组件的props中。例如：

import React from 'react';
import { connect } from 'react-redux';
import { increment, setUser } from './actions';

const Counter = ({ counter, user, increment, setUser }) => {
  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={increment}>Increment</button>
      <h1>User: {user}</h1>
      <button onClick={() => setUser('John')}>Set User</button>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    counter: state.counter,
    user: state.user,
  };
};

export default connect(mapStateToProps, { increment, setUser })(Counter);

mapStateToProps函数用于将Redux store中的状态映射到组件的props中。在这个例子中，mapStateToProps函数没有传入任何参数。这是因为它默认接收Redux的store.getState()作为参数，用于获取整个store的状态。所以在mapStateToProps函数中，我们可以通过state.counter和state.user来访问Redux store中的counter和user状态，然后将其作为一个对象返回。

mapStateToProps函数返回一个对象，其中包含了两个属性counter和user。这两个属性分别对应了Redux store中的counter和user状态。

接下来，我们使用connect函数将组件连接到Redux的store，并将mapStateToProps函数返回的对象以及increment和setUser这两个action creators作为参数传递给connect函数。这样，Redux store中的状态和action creators就会被映射到组件的props中。

最后，我们通过export default connect(mapStateToProps, { increment, setUser })(Counter)语句将被连接的组件导出，使其可以在其他组件中使用Redux store中的状态以及调用action creators来修改状态。这样，在组件内部就可以通过this.props.counter和this.props.user来访问Redux store中的状态，并且通过this.props.increment()和this.props.setUser(user)来触发对应的action。

项目结构的划分可以根据实际需要进行调整，一般可以按照功能或模块进行划分。例如：

src/
├── actions/
│   └── index.js
├── reducers/
│   ├── counterReducer.js
│   └── userReducer.js
├── components/
│   └── Counter.js
├── App.js
└── index.js

在这个示例中，actions文件夹存放action creators，reducers文件夹存放reducers，components文件夹存放React组件，App.js是根组件，index.js是应用的入口文件。

5. 说说React render方法的原理？在什么时候会被触发？

React的render方法是React组件中的一个生命周期方法，用于渲染组件的内容。它是React组件的核心方法之一，用于生成虚拟DOM并更新真实DOM。

render方法的原理是将组件的状态和属性转换为虚拟DOM对象，并将其渲染到真实DOM中。在render方法中，开发者可以使用JSX语法来描述组件的结构和内容。

render方法会在以下几种情况下被触发：

组件初始化：当组件首次被加载到DOM中时，render方法会被调用，用于渲染初始的虚拟DOM并将其插入到真实DOM中。
组件更新：当组件的状态或属性发生变化时，React会自动调用render方法，重新生成虚拟DOM，并将其与之前的虚拟DOM进行比对，找出需要更新的部分，并将更新部分应用到真实DOM中。
父组件更新：当组件的父组件发生更新时，也会触发render方法，因为组件的父组件更新可能会引起子组件的重新渲染。
强制渲染：开发者可以通过调用组件的forceUpdate方法来强制触发render方法，即使组件的状态或属性没有发生变化。

需要注意的是，React会根据需要进行优化，仅更新真实DOM中需要更新的部分，而不是整个DOM树。这个过程是通过React的调和算法来实现的，React会比对新旧虚拟DOM树的差异，并只更新需要更新的部分。这种优化可以提高性能，减少不必要的DOM操作。

总结起来，React的render方法是用于生成虚拟DOM并渲染到真实DOM的核心方法。它会在组件初始化、组件更新、父组件更新以及强制渲染时被触发。通过比对新旧虚拟DOM的差异，React可以高效地更新真实DOM，减少不必要的操作。