挂钩

反应钩子

Hooks are a new feature added in React v16.8. It allows to use all React features without writing class components. For example, before version 16.8, we need a class component to manage state of a component. Now we can keep state in a functional component using useState hook.

你感觉

祖兹 100033

使用效果

The Effect hook lets us to perform side effects in functional components. It helps us to avoid redundant code in different lifecycle methods of a class component. It helps to group related code.

使用上下文

It is used for creating common data that is to be accessed by the components hierarchy without having to pass the props down to each level.

自定义钩子到底是什么?

zoz100036

如何避免在 React 中重新渲染?

zoz100037

使用参考

The useRef Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.

如何在 react 中创建组件

Components are self-contained and reusable pieces of code. They perform the same function as JavaScript functions, but they work independently and return HTML.

功能组件或无状态组件:

• 是简单的javascript函数,只返回html UI

• 它也被称为无状态组件,因为它们只是简单地接受数据并以某种形式显示它们,即它们主要负责渲染 UI。

• 它接受函数中的属性(props)并返回html(JSX)

• 不使用状态给出解决方案

• 功能组件中没有使用render方法。

• 这些通常可以使用箭头函数定义,但也可以使用常规函数关键字创建。

• 是常规的 ES6 类,扩展了组件类表单 react 库

类组件

• 也称为“有状态”组件,因为它们实现逻辑和状态。

• 它必须有 render() 方法返回 html

• 复杂的UI逻辑

• 您将 props 传递给类组件并使用 this.props 访问它们

什么是高阶组件?

higher-order component is a function that takes a component and returns a new component. Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

受控和非受控组件

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component controls it by handling the callback and managing its own state and passing the new values as props to the controlled component

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

什么是 JSX?

JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand.

错误边界?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

反应路由器

React Router refers to the standard library used for routing in React. It permits us for building a single-page web application in React with navigation without even refreshing the page when the user navigates

优化 React 应用程序性能。

• 使用纯组件

• 依赖优化

• Memoize 组件 - 防止不必要的重新渲染

• 使用 usecallback - 依赖项更改时触发

• 使用 react 懒惰

使用 useMemo() -

It is a React hook that is used for caching CPU-Expensive functions. Sometimes in a React app, a CPU-Expensive function gets called repeatedly due to re-renders of a component, which can lead to slow rendering. useMemo( ) hook can be used to cache such functions. By using useMemo( ), the CPU-Expensive function gets called only when it is needed.

使用 React.PureComponent -

It is a base component class that checks the state and props of a component to know whether the component should be updated.

Instead of using the simple React.Component, we can use React.PureComponent to reduce the re-renders of a component unnecessarily.

延迟加载 -

used to reduce the load time of a React app. Lazy loading reduces the risk of poor web app performance..

解释反应中的键

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

错误边界

React 16 introduces a new concept to handle the errors by using the error boundaries. Now, if any JavaScript error found in a part of the UI, it does not break the whole app.

解释 React js 中的严格模式

Verify that the components inside are following some of the recommended practices and warn you if not in the console

什么是“三点运算符”?

allows us to quickly copy all or part of an existing array or object into another array or object. Curly brackets aren’t required if only one expression is present

箭头函数

is one of the features introduced in the ES6 version of JavaScript. It allows you to create functions in a cleaner way compared to regular functions.

生命周期

• 初始阶段

• 安装阶段

• 更新阶段

• 卸载阶段

初始阶段

In this phase, a component contains the default Props and initial State.it having the following methods like

获取默认道具()

It is used to specify the default value of this.props.

获取初始状态()

zoz100057

安装阶段

In this phase, the instance of a component is created and inserted into the DOM. It consists of the following methods.

组件WillMount()

This is invoked immediately before a component gets rendered into the DOM.

组件DidMount()

This is invoked immediately after a component gets rendered and placed on the DOM

使成为()

This method is defined in each and every component. It is responsible for returning a single root HTML node element.

更新阶段

Here, we get new Props and change State. This phase also allows to handle user interaction and provide communication with the components hierarchy. This phase consists

组件WillRecieveProps()

It is invoked when a component receives new props.

应该组件更新()

It is invoked when a component decides any changes/updation to the DOM.

组件WillUpdate()

It is invoked just before the component updating occurs. Here, you can't change the component state by invoking this.setState() method. It will not be called, if shouldComponentUpdate() returns false.

组件DidUpdate()

It is invoked immediately after the component updating occurs.

卸载阶段

It is the final phase of the react component lifecycle. It is called when a component instance is destroyed and unmounted from the DOM. This phase contains only one method and is given below.

组件WillUnmount()

This method is invoked immediately before a component is destroyed and unmounted permanently. It performs any necessary cleanup related task such as invalidating timers, event listener, canceling network requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it again.

虚拟DOM

zoz100069

虚拟dom和真实dom的区别

真正的DOM

• 1.它更新缓慢。

• 2.可以直接更新HTML。

• 3.如果元素更新,则创建一个新的 DOM。

• 4. DOM 操作非常昂贵。

• 5.太多的内存浪费。

虚拟DOM

• 1.它更新得更快。

• 2.无法直接更新 HTML。

• 3.如果元素更新,则更新 JSX。

• 4. DOM 操作非常容易。

• 5.没有内存浪费。

什么是事件

An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizes, and other interactions are called events.

事件循环

JavaScript has a runtime model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks

你如何在反应中定义事件?

An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizes, and other interactions are called events.

React 中 render() 的目的是什么。

React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component then they must be grouped together inside one enclosing tag such as

<form>, <group>, <div>

进入全屏模式 退出全屏模式

自动重新渲染

React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.

什么是反应?

React is a front-end JavaScript library developed by Facebook in 2011.It follows the component based approach which helps in building reusable UI components.It is used for developing complex and interactive web and mobile UI.it has one of the largest communities supporting it.

反应的特点

• 它使用虚拟DOM而不是真实DOM。

• 它使用服务器端渲染。

• 它遵循单向数据流或数据绑定。

反应的优点

• 它提高了应用程序的性能

• 可以方便地在客户端和服务器端使用

• 因为 JSX,代码的可读性增加了

• React 很容易与其他框架如 Meteor、Angular 等集成使用 React,

• 编写UI测试用例变得异常轻松

反应的限制

React is just a library, not a full-blown frameworkIts library is very large and takes time to understandIt can be little difficult for the novice programmers to understandCoding gets complex as it uses inline templating and JSX