React的知识可供参考

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事件有啥区别 如下:

  1. 绑定方式:在React中,事件必须使用on开头的驼峰命名属性来绑定,例如onClick、onKeyDown等,而DOM事件可以使用addEventListener()方法和直接在元素上创建事件属性来绑定。
  2. 事件处理函数:在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的发展和维护十分专注和积极,适用于小型、中型的应用场景。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值