React的知识可供参考

最新推荐文章于 2024-07-18 17:32:29 发布

h_t_d

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量34

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/h_t_d/article/details/133362165

版权

React组件之间的通讯如下：

1、props：父组件可以向子组件传递数据或回调函数作为props，在子组件中通过props进行访问和使用。

2、Context（上下文）：context允许在组件树中共享数据，避免了通过逐层传递props的麻烦。

3、自定义事件：父组件可以通过自定义事件机制，向子组件发送消息或触发特定的事件。

4、状态提升：当多个组件共享用同一份数据时，可以将数据的状态放置在它们共同父组件中管理，然后通过props传给子组件。

5、Redux或其他状态管理库：当应用中的组件变得复杂时，可是使用状态管理库例如（Redux、Mobx等）来集中管理和共享状态。

JSX的本质是如下：

1、声明性：JSX通过类似HTML的标记语法，以声明式的方式描述了UI的结构和组件之间的关系。

2、JavaScript表达性：虽然看起来像HTML，但是JSX是JavaScript的扩展，可以在其中利用JavaScript的全套能力

3、组件化：JSX允许开发者创建自定义组件，将UI细分为可复用的模块。

4、转换为JavaScript：尽管JSX看起来像是一种新的语法，但它最终会被转换为普通的JavaScript代码。

context是什么如何应用如下：

Context（上下文）：是React中用于在组件树中共享数据的一种机制，它允许在组件之间传递数据，而不需要通过逐层传递props的方式。

如何应用：

1、要使用Context，需要先创建一个Context对象，可以通过React.createContext()方法进行创建。例如：

const MyContext = React.createContext();

2、创建Context对象后，可以将其提供给需要访问该数据的组件，通过在组件树中的某个父组件上使用Context.Provider组件，并将数据作为value属性传递给Provider。例如

<MyContext.Provider value={myData}>

{/* 子组件 */}

</MyContext.Provider>

3、接下来，在需要访问数据的子组件中，可以通过Context.Consumer组件来消费数据。Context.Consumer会接收一个函数作为其子元素，并将当前的Context值作为该函数的参数。
例如：

<MyContext.Consumer>

{value => (

// 使用context数据的组件内容

<div>{value}</div>

)}

</MyContext.Consumer>

4、如果正在使用React 16.8版本及以上，还可以使用React Hook中的useContext()方法直接在函数组件中获取Context的值。例如：

const value = useContext(MyContext);

5、需要注意的是，如果没有在组件树中的某个父组件上提供Context的值，那么在子组件中使用Context时将会默认使用Context对象的defaultValue属性的值。

例如：

const MyContext = React.createContext("default value");

shouldComponentUpdate的用途如下：

用于控制组件是否进行重新渲染。它的主要用途是优化性能，避免不必要的渲染操作。

redux单向数据流的机制如下：

1、Store（储存器）：Store是应用程序的状态仓库，存储着整个应用程序的状态数据。

2、Actions（动作）：Action是一个简单的对象，它描述了发生什麽活动。

3、Reducers（归约器）：Reducer是一种纯函数，接收但前状态和Action作为参数，根据Action的类型来更新状态。

4、Dispatcher（派发器）：Dispatcher是Redux的核心机制之一，它将Action发送到Reducer进行处理。

5、Subscribers（订阅者）：订阅者是对状态变化进行监听的函数。

React类组件setState是同步还是异步

异步操作

纯函数是如下：

1、可预测性：给定相同的输入，纯函数总是返回相同的输出，不受外部状态的影响。

2、无副作用：纯函数不会对外部环境产生影响，不修改输入参数，也不会改变全局变量或外部状态。

3、数据独立：纯函数对于输入的数据是完全独立的，不依赖于外部的数据源。

4、可组合性：纯函数可以方便地组合在一起，形成更复杂的函数，因为它们不会相互干扰，不会引入意外的行为或依赖关系。

React组件的生命周期：如下

1、constructor()：组件实例化时首先调用的方法，用于初始化状态和绑定事件处理函数。

2、componentDidMount()：该方法在组件渲染完成后调用，通常用于发送网络请求、订阅事件等副作用操作。

3、static getDerivedStateFromProps(props, state)：该方法在组件实例化、接收到新的props或调用setState方法后触发。

4、shouldComponentUpdate(nextProps, nextState)：该方法在组件即将重新渲染之前调用，可以根据传入的props和state来判断是否需要进行重新渲染。

5、render()：该方法用于生成组件的虚拟DOM结构，必须返回一个React元素。

6、getSnapshotBeforeUpdate(prevProps, prevState)：该方法在组件即将更新之前调用，可以获取到更新之前的props和state，并返回一个值。

7、componentDidUpdate(prevProps, prevState, snapshot)：该方法在组件更新完成后调用，通常用于处理更新后的DOM操作或执行其他副作用操作。

8、componentWillUnmount()：该方法在组件即将卸载时调用，可以进行清理操作，如取消订阅、清除定时器等。

9、componentDidCatch(error, info)：该方法在组件内部发生错误时调用，用于捕获并处理组件的错误。

React发起ajax是在那个生命周期里如下：

通常会将Ajax请求放在componentDidMount()生命周期方法中进行，即组件渲染完成后发起请求。componentDidMount()是在组件挂载到DOM后调用的方法，这个时候可以安全地访问和操作DOM节点。

以下是一个使用axios库在componentDidMount()中发起Ajax请求的示例：

import React, { Component } from 'react'

import axios from 'axios'

class MyComponent extends Component {

componentDidMount() {

axios.get('https://api.example.com/data')

.then(response => { // 请求成功，处理数据 console.log(response.data)

})

.catch(error => { // 请求失败，处理错误 console.error(error)

})

}

render() {

return (

<div> {/* 组件的其他内容 */} </div>

)

} }

渲染列表为何使用key 如下：

1、性能优化：指定key属性可以帮助React在更新列表时更准确地识别哪些列表项发生了变化。

2、元素身份的唯一标识：key属性用于区分列表中的每个元素，使得React能够正确地跟踪每个元素的状态。

3、解决警告：如果没有为列表项指定key属性，React会在开发者工具中给出警告，提醒开发者为每个列表项添加唯一的key属性。

const userList = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

function UserList() {
  return (
    <ul>
      {userList.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

函数组件和class组件有什么区别：如下

1、语法和写法：函数组件是通过函数来创建的，而类组件是通过ES6的类来创建的。

2、状态管理：在过去，函数组件是无状态的，只能使用props来接收数据。

3、性能差异：从性能角度来看，通常情况下，函数组件比类组件具有更好的性能。

4、代码结构和可读性：函数组件通常更简洁、代码结构更清晰，因为没有额外的类定义和生命周期方法。

什么是受控组件，什么是非受控组件如下：

受控组件（Controlled Components）：是指由React控制其值和状态的表单元素。它们的值和状态由React组件的state或props属性来控制。当用户与受控组件进行交互时，对应的值会被更新到组件的state中，通过修改state可以改变组件的显示值。受控组件提供了一种可靠的、单一数据源的数据管理方案，使得表单数据的处理更加可控和可预测。

下面是一个受控组件的示例：

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交逻辑
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <button type="submit">提交</button>
      </form>
    );
  }
}

非受控组件（Uncontrolled Components）：是指表单元素的值由DOM自身来管理，而非由React的state或props属性控制。非受控组件一般通过ref引用的方式来获取表单元素的值，而不会显式地更新和管理表单元素的值。非受控组件适合简单的表单场景，或者在需要直接访问表单元素DOM实例时使用。

下面是一个非受控组件的示例：

class UncontrolledComponent extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    const value = this.inputRef.value;
    // 处理表单提交逻辑
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={ref => this.inputRef = ref} />
        <button type="submit">提交</button>
      </form>
    );
  }
}

什么是 redux、 react-redux、 redux-thunk、 redux-saga、redux-toolkit，它们之间的区别是什么如下：

Redux是一个用于管理JavaScript应用中的状态的可预测的状态容器。它可以与任何JavaScript应用一起使用，不限于React。Redux采用单一的全局状态树，并通过定义纯函数的方式来处理状态的变化。

React-Redux是Redux在React应用中的官方绑定库。它提供了一些用于将Redux与React组件连接的API，使得Redux状态可以更方便地在React组件中进行访问和更新。

Redux-Thunk是Redux的一个中间件，用于处理异步逻辑。它允许你在Redux中派发（dispatch）函数而不仅仅是普通的action对象。这样可以使得异步操作变得更加简单和可控。

Redux-Saga也是Redux的一个中间件，用于处理异步逻辑。它基于Generator函数的概念，通过将异步操作表示为一系列的同步操作，使得复杂的异步流程变得更易理解、测试和维护。

Redux-Toolkit是Redux的官方工具集，旨在简化Redux的使用和开发流程。它集成了一些常用的Redux中间件（如Redux-Thunk、Redux-Saga）、实用函数和工具，提供了一种更简洁、更现代的方式来编写Redux代码。

区别如下：

Redux是一个独立的状态管理库，可以与任何JavaScript应用一起使用。
React-Redux是将Redux与React绑定在一起的官方库，提供了连接Redux状态与React组件的便捷API。
Redux-Thunk和Redux-Saga都是处理Redux中异步逻辑的中间件，但它们的实现方式不同。Redux-Thunk允许你派发函数作为action，而Redux-Saga使用Generator函数将异步操作表示为同步操作的序列。
Redux-Toolkit是Redux的官方工具集，简化了Redux的使用和开发流程，集成了常用的中间件和实用函数。

异步组件什么时候使用如下：

1、资源加载较大：如果一个组件依赖的资源（例如图像、视频、大型数据文件）较大，而且这些资源不是必需的初始渲染内容，可以将其设置为异步组件。

2、懒加载/按需加载：当你需要延迟加载某个组件直到它被使用时，可以将其设置为异步组件。

3、条件性加载：如果你有一些只在特定条件下才会使用的组件，可以将其设置为异步组件。

4、用户交互后加载：有时需要等待用户执行某种操作后才加载组件，例如点击按钮后显示一个弹出框或模态框。

如何抽离公共组件如下：

1、识别可抽离的公共组件：浏览整个项目代码，寻找可以复用的组件。

2、创建公共组件库：将找到的公共组件定义到一个新的组件库中。

3、导入公共组件库：在项目中通过import语句或其他方式导入需要使用的公共组件，然后在需要的地方使用。

4、维护公共组件库：随着项目的发展，公共组件库可能会不断增加新的组件，或对现有组件进行更新和维护。

Redux怎样进行异步请求：如下

1、安装依赖

npm install redux redux-thunk

2、创建action creators

在Redux中创建一个异步请求的action creator，它会返回一个函数而不是普通的action对象。这个函数可以接收dispatch和getState作为参数，可以在内部进行异步操作，并在异步操作完成后分发action。

// actions.js
import axios from 'axios';

export const fetchUser = () => {
  return (dispatch, getState) => {
    dispatch({ type: 'FETCH_USER_REQUEST' });

    axios.get('/api/user')
      .then(response => {
        dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_USER_FAILURE', payload: error.message });
      });
  };
};

3、创建reducer

根据上述action types，创建相应的reducer来处理异步请求的状态：

// reducers.js
const initialState = {
  loading: false,
  user: null,
  error: null
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_USER_REQUEST':
      return { ...state, loading: true, error: null };
    case 'FETCH_USER_SUCCESS':
      return { ...state, loading: false, user: action.payload };
    case 'FETCH_USER_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

4、创建store

使用Redux的createStore函数来创建一个store，并将redux-thunk作为中间件应用：

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));

export default store;

5、在组件中使用异步请求

在需要进行异步请求的组件中，可以使用connect函数将action creators和state映射到组件的props上，并在需要时调用异步请求的action creator。

// MyComponent.js
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchUser } from './actions';

const MyComponent = ({ loading, user, error, fetchUser }) => {
  useEffect(() => {
    fetchUser();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return <div>{user && user.name}</div>;
};

const mapStateToProps = state => {
  return {
    loading: state.user.loading,
    user: state.user.user,
    error: state.user.error
  };
};

export default connect(mapStateToProps, { fetchUser })(MyComponent);

React-router如何配置懒加载如下：

1、定义动态导入的组件

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

const MyComponent = () => {
  return <div>This is my component.</div>;
};

export default MyComponent;

2、使用React.lazy进行懒加载

// App.js
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/mycomponent" component={MyComponent} />
          <Route component={NotFound} />
        </Switch>
      </Suspense>
    </Router>
  );
};

export default App;

什么是PureComponent 如下：

PureComponent 和普通的组件类似，都是继承自 React.Component。但是，PureComponent 重写了 shouldComponentUpdate 方法，并且使用了浅比较来判断是否需要重新渲染组件。如果 props 和 state 没有发生变化，组件就不会主动触发更新，从而提升应用的性能。

应当注意的是，PureComponent 适用于只有一个层级的组件，或者单独渲染的列表项（list item）等简单场景。如果组件依赖于深层次的数据结构、复杂的业务逻辑、强依赖上下文等情况下，PureComponent 可能无法正常工作。在这些复杂情况下，你可以使用 React.memo 来优化组件的性能。

React事件和DOM事件有啥区别如下：

绑定方式：在React中，事件必须使用on开头的驼峰命名属性来绑定，例如onClick、onKeyDown等，而DOM事件可以使用addEventListener()方法和直接在元素上创建事件属性来绑定。
事件处理函数：在React中，事件处理函数通常是作为组件类的一个方法来定义，而不是全局函数。这样做可以更好地组织代码，避免命名冲突和代码重复。

例如，在React中，我们可以这样定义一个响应点击事件的方法：

class MyButton extends React.Component {
  handleClick = (event) => {
    console.log('Button clicked', event);
  }

  render () {
    return (
      <button onClick={this.handleClick}>
        Click me!
      </button>
    );
  }
}

3、事件对象：在React中，每个事件处理函数都会被传递一个SyntheticEvent合成事件对象。这个合成事件对象封装了底层的原生事件，并且提供了一些跨浏览器的方法和属性。例如，在React中，我们可以使用event.preventDefault()来阻止默认行为，而不必担心浏览器差异。

4、React中的事件处理机制内部采用了事件委托（event delegation）的方式，将所有事件都绑定在 document 上，然后通过组件的propagation向下传递。这样做可以避免对每个元素都进行事件绑定，提高性能。

React性能优化方式有哪些如下：

1、使用合适的组件类型：

使用函数组件（Functional Components）代替类组件（Class Components）：函数组件的渲染开销通常更低。
使用PureComponent或React.memo：这些组件可以避免不必要的重渲染，利用浅比较来判断是否需要更新。
避免不必要的组件嵌套：减少组件层级可以提高性能。

2、使用列表的key属性：在渲染列表时，为每个列表项指定唯一的key属性，这样React可以更高效地跟踪列表项的变化。

3、使用shouldComponentUpdate或React.memo限制组件更新范围：在自定义的类组件中，如果明确知道哪些属性（props）或状态（state）的变化会导致组件重新渲染，可以重写shouldComponentUpdate方法来进行自定义的判断。另外，React.memo也可以用来包装函数组件，以达到相似的效果。

4、使用React的虚拟化技术：当处理大量数据或复杂列表时，可以使用React的虚拟化技术，例如react-virtualized、react-window和react-lazyload等库，来只渲染可见区域内的内容，减少DOM节点数量，提高性能。

5、避免频繁的强制更新：尽量避免在组件中过度使用forceUpdate方法，而是依赖于props和state的变化来触发更新。

6、避免频繁的强制更新：尽量避免在组件中过度使用forceUpdate方法，而是依赖于props和state的变化来触发更新。

7、使用React.lazy进行代码分割：React.lazy是React 16.6引入的特性，可以实现动态导入组件，实现按需加载，减少初始加载的代码量。

8、使用memoization技术进行数据缓存：对于一些计算量较大的函数，可以使用memoization技术来缓存结果，避免重复计算。

React和Vue的区别如下：

1、响应式原理不同：

React使用虚拟DOM（Virtual DOM）来管理组件的状态和UI渲染，当状态发生变化时，React会重新计算虚拟DOM并与上一次计算的结果进行比较，然后只更新发生变化的部分。
Vue使用模板编译（Template Compilation）和响应式数据（Reactivity System）来管理视图和状态的变化。当状态发生变化时，Vue会通过Observer监听变化，然后自动更新视图。

2、组件设计思想不同：

React将所有组件都视为函数，并采用函数式编程（Functional Programming）的思想，使得组件之间的信息传递和依赖关系更加清晰、直观。
Vue将组件分为模板、逻辑和样式三个部分，并采用单文件组件（Single-File Components）的方式来组织代码，使得组件的结构更加清晰、易于维护。

3、API设计风格不同：

React的API设计风格更加简约、灵活，有较高的可复用性，在使用过程中需要手动管理组件的状态和生命周期。
Vue的API设计风格更加强调“约定优于配置”（Convention over Configuration），提供了一系列指令和插件，使得组件的使用更加方便、简单。

4、社区生态不同：

React的社区生态较为庞大、成熟，拥有丰富的第三方库和插件，适用于大型、复杂的应用场景。
Vue的社区生态较为小众，但核心团队对Vue的发展和维护十分专注和积极，适用于小型、中型的应用场景。

h_t_d

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React的知识可供参考

受控组件提供了一种可靠的、单一数据源的数据管理方案，使得表单数据的处理更加可控和可预测。4、使用React的虚拟化技术：当处理大量数据或复杂列表时，可以使用React的虚拟化技术，例如react-virtualized、react-window和react-lazyload等库，来只渲染可见区域内的内容，减少DOM节点数量，提高性能。5、需要注意的是，如果没有在组件树中的某个父组件上提供Context的值，那么在子组件中使用Context时将会默认使用Context对象的defaultValue属性的值。
复制链接

扫一扫