从零到一学习React基础与原理-六虎

React的基础

JSX简介

概念

JSX是JavaScript的语法扩展，它答应我们在JavaScript代码中写类似HTML的符号。虽然不是必需的，JSX在React开发中广泛运用，由于它使代码更易读和编写。

代码示例

const element = <h1>Hello, world!</h1>;

组件和Props

组件概念

React运用由多个组件构成，每个组件代表UI的一部分。组件可所以类或函数办法，答应更灵敏的代码组织和重用。

Props

Props是组件的输入，类似于函数的参数。它们是不行变的，使得组件更易于猜测和调试。

代码示例

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

State和生命周期

State

State是React组件的状况信息。它答应组件对用户输入或时刻活动做出响应，并动态地更新UI。

生命周期

React组件有多个生命周期办法，例如componentDidMount和componentDidUpdate，它们在组件的不同阶段被调用。

代码示例

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({
      date: new Date()
    });
  }
  render() {
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

虚拟DOM和实践DOM

什么是虚拟DOM

定义

虚拟DOM（Virtual DOM）是一个轻量级的JavaScript对象，它是实践DOM的一个简化版别。React运用虚拟DOM来优化DOM操作，进步运用功能。

原理

当组件的状况改变时，React首先在虚拟DOM上进行改动，然后比较它与上一次的虚拟DOM的差异，最终只更新实践DOM中有改变的部分。

虚拟DOM怎么作业

Diff算法

React运用Diff算法比较前后两个虚拟DOM的差异。这个进程称为“协调”（Reconciliation），能够保证以最小的成本更新DOM。

批量更新

React进行DOM更新时，会累积一批改变，然后一次性履行，这削减了不必要的DOM操作，进步了功能。

与实践DOM的比较

优势

功能进步：削减实践DOM操作次数，进步功率。
声明式编程：开发者只需重视状况办理，无需直接操作DOM。

限制

初始烘托成本：虚拟DOM的创立和维护需求额定的资源。

组件更新与重烘托

组件生命周期详解

挂载阶段

constructor: 初始化state，绑定事件处理办法。
static getDerivedStateFromProps: 在烘托前更新state以响应props的改变。
render: 组件烘托函数。
componentDidMount: 组件挂载完成后履行，合适进行API调用、订阅等操作。

更新阶段

static getDerivedStateFromProps: 关于更新，同样能够在烘托前调整state。
shouldComponentUpdate: 决议是否从头烘托组件，能够用于功能优化。
render: 从头烘托。
getSnapshotBeforeUpdate: 在DOM更新前捕获一些信息（如滚动位置）。
componentDidUpdate: 更新完成后履行，合适履行DOM操作或网络恳求。

卸载阶段

componentWillUnmount: 整理作业，如撤销网络恳求、移除订阅等。

高效更新组件

防止不必要的从头烘托

运用shouldComponentUpdate或React.PureComponent削减不必要的烘托。
运用不行变数据结构，以便快速比较状况或特点是否改变。

运用键（Keys）优化列表烘托

在烘托列表时，为每个列表项分配一个唯一的key。这有助于React识别哪些项被更改、添加或删去，然后进步功能。

运用懒加载（Lazy Loading）

运用React.lazy和Suspense对组件进行懒加载，削减初始负载时刻。

Hooks简介

useState和useEffect

useState

用途: 答应在函数组件中运用状况。
特点: 回来一个状况值和一个用于更新这个状况值的函数。

代码示例

function Example() {
  // 声明一个新的状况变量“count”
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

用途: 用于在函数组件中履行副作用操作（如数据获取、订阅或手动修改React组件中的DOM）。
代替: 代替了类组件中的componentDidMount, componentDidUpdate, 和 componentWillUnmount。

代码示例

function Example() {
  const [count, setCount] = useState(0);
  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 运用浏览器的API更新文档标题
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

自定义Hooks

概念

自定义Hooks答应你提取组件逻辑到可重用的函数中。

运用场景

当你发现一些逻辑在不同组件间重复时，能够将其提取到一个自定义Hook中。

示例

假定我们有多个组件需求运用到窗口的宽度：

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });
  return width;
}
function MyComponent() {
  const width = useWindowWidth();
  // 运用窗口宽度
}

React Hooks内部机制深度剖析

useState深化

底层完成

React维护了一个当时正在烘托的组件的指针。这个指针指向了一个“fiber”，每个fiber代表了一个React组件。
每个fiber节点都有一个对应的hooks链表。当你调用useState，它实践上是在这个链表上添加一个新的hook节点。
这些hook节点存储了状况值和一个更新该状况的分派（dispatch）函数。

更新进程

当setState被调用时，React会将该组件符号为“脏”组件。这意味着在下一次React的烘托周期中，这个组件将被从头烘托。
React从头烘托组件时，会按顺序遍历这些hooks，并读取最新的状况。

闭包问题

由于Hooks的闭包特性，每次组件烘托时都会“捕获”其时的状况。这意味着假如不正确运用，可能会导致状况更新时引用了旧的状况值。

useEffect具体原理

履行时机

useEffect的履行时机在浏览器完成布局和绘制之后，保证不会堵塞页面的可见更新。

依靠盯梢

React经过比较依靠数组中的元素与前一次烘托时的元素来确认是否需求从头履行effect。假如数组中的任何元素产生了改变，effect就会在下一个烘托周期后运转。

整理函数

假如useEffect回来一个函数，React会在履行当时effect之前对上一个effect进行整理。这是办理副作用（如订阅和定时器）的理想办法。

调度优化

React对effect的调度进行了优化，以防止不必要的重烘托和功能损耗。例如，在组件卸载时，一切未运转的effects都会被清除。

Hooks与Fiber架构

React的Fiber架构是其对组件烘托和更新的底层重构。Hooks的完成紧密依靠于Fiber架构，尤其是在状况更新和effect的调度方面。Fiber架构使得React能够暂停、中止或重启烘托作业，这关于Hooks的正确履行至关重要。

React Context API 深度解析

Context API概述

用途

Context API答应组件树中的数据传递，而不必显式地经过每个层级手动传递props。

Context底层原理

创立Context

运用React.createContext创立一个Context对象。这个对象包括Provider和Consumer组件。

代码示例

const MyContext = React.createContext(defaultValue);

Provider组件

Provider组件答应消费组件订阅context的改变。
当Provider的value特点改变时，一切作为其子孙的顾客（consumer）组件都会从头烘托。

消费Context

能够经过Context.Consumer组件或useContext Hook来消费Context。

代码示例

<MyContext.Provider value={/* 某个值 */}>
  {/* 子组件 */}
</MyContext.Provider>

Context作业流程

Provider更新: 当Provider的value特点改变时，React会对Provider下的一切顾客进行更新。
Context传递: React运用Fiber树来向下传递Context值，当遇到匹配的Consumer时，将提供对应的值。
顾客烘托: 顾客组件接收到新的值后会进行从头烘托。

高档运用

跨组件通讯

Context API常用于完成跨组件通讯，如主题设置、用户偏好等。

功能留意事项

频频改变的Context可能会导致大量的从头烘托。因而，在运用时应当留意其对功能的影响。

代码示例

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

Context与Fiber架构

React的Fiber架构答应Context值在组件树中更高效地传递和更新。Fiber节点存储了对应组件的Context依靠信息，这使得React能够快速确认哪些组件需求在Context值改变时从头烘托。

绝对能够！接下来，我们将深化讨论React功能优化的高档战略，特别重视于底层的完成细节和更杂乱的场景。

React功能优化高档战略

运用`React.memo`优化函数组件

概述

React.memo是一个高阶组件，它仅对组件的props进行浅比较，以防止不必要的烘托。

原理

当组件的props没有改变时，React.memo会跳过烘托，然后削减组件树的烘托次数。

代码示例

const MyComponent = React.memo(function MyComponent(props) {
  /* 烘托组件 */
});

运用`useCallback`和`useMemo`防止不必要的核算

useCallback

useCallback回来一个回忆化的回调函数，只有在其依靠项产生改变时，才会更新。

useMemo

useMemo用于回忆化核算结果，只有当依靠项改动时，才从头核算。

代码示例

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

运用懒加载（Lazy Loading）优化大型组件树

React.lazy

React.lazy答应你定义一个动态加载的组件。这关于削减运用的初始包大小特别有用。

Suspense

Suspense组件让你指定加载指示器（如旋转器），在等候加载的组件显现时展示。

代码示例

const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </React.Suspense>
  );
}

运用Fiber架构优势进行使命切割

时刻切片（Time Slicing）

React 16引入的Fiber架构答应React将烘托作业切割成多个小使命，这些使命能够在浏览器的主线程中空隙履行，防止长时刻占用主线程。

代码示例

这是一个底层特性，通常不需求开发者直接操作，但了解其原理有助于编写更高效的组件。

运用`useReducer`优化杂乱组件的状况办理

概述

关于具有杂乱状况逻辑的组件，运用useReducer能够比useState更加明晰和办理。

代码示例

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, {count: 0});
  // ...
}

React高档功能优化技能深度讨论

优化烘托进程中的不行变数据模式

概念

在React中，运用不行变数据能够削减不必要的烘托，由于React的重烘托机制依靠于props和state的浅比较。

完成

运用像Immutable.js这样的库来处理数据，保证当数据改变时，只有真实改变的部分会被更新。

代码示例

import { Map } from 'immutable';
function MyComponent({ data }) {
  // 运用Immutable.js处理数据
  const newData = data.set('key', 'value');
  // ...
}

运用React的批处理（Batching）特性

原理

React默许会批量处理setState调用，以削减不必要的烘托次数。
在事件处理器或生命周期办法中，连续的setState调用会被主动批处理。

深化

在某些情况下（如异步操作），默许的批处理可能不会产生。能够运用ReactDOM.unstable_batchedUpdates显式进行批处理。

代码示例

import ReactDOM from 'react-dom';
function updateState() {
  ReactDOM.unstable_batchedUpdates(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
  });
}

运用`shouldComponentUpdate`和`React.PureComponent`精确操控更新

shouldComponentUpdate

经过定义shouldComponentUpdate办法，能够操控组件是否需求更新。

React.PureComponent

React.PureComponent经过浅比较props和state来主动完成shouldComponentUpdate，削减了不必要的烘托。

代码示例

class MyComponent extends React.PureComponent {
  render() {
    // ...
  }
}

优化大型列表的烘托

虚拟列表（Virtual List）

关于大型列表烘托，运用虚拟列表能够大幅进步功能。这种办法只烘托当时视图中的列表项。

完成

能够运用如react-window或react-virtualized等库来完成虚拟列表。

代码示例

import { FixedSizeList as List } from 'react-window';
const MyList = ({ data }) => (
  <List
    height={150}
    itemCount={data.length}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>
        Row {data[index]}
      </div>
    )}
  </List>
);

运用React Fiber架构的并发特性

时刻切片

React Fiber引入了时刻切片（Time Slicing），这意味着React能够将烘托使命分红几个小块进行，防止堵塞主线程。

并发模式（Concurrent Mode）

并发模式是React的一种新模式，它答应React在烘托时更好地运用时刻切片和优先级调度。

总结

本文深化讨论了React技能的几个关键方面，特别是那些关于了解和优化React运用至关重要的高档概念和战略。

React Hooks深度解析
- 我们讨论了useState和useEffect等Hooks的底层作业原理，了解了React是怎么经过Fiber节点办理组件状况和副作用的。
React Context API
- 分析了Context API的内部机制，特别是其在组件树中怎么传递和运用数据。
React功能优化战略
- 深化讨论了多种功能优化技能，包括运用React.memo、useCallback和useMemo来防止不必要的烘托，以及运用React Fiber架构的特性来进步运用功能。
杂乱场景下的运用
- 探究了怎么处理大型列表和杂乱状况逻辑，以及怎么运用React的并发特性和时刻切片技能优化长时刻运转的使命。

经过这些深化的讨论，我们不仅加深了对React内部作业机制的了解，也学习了怎么在实践开发中运用这些知识来构建更高效、更可维护的Web运用。

从零到一学习React基础与原理

React的基础

JSX简介

组件和Props

State和生命周期

虚拟DOM和实践DOM

什么是虚拟DOM

虚拟DOM怎么作业

与实践DOM的比较

组件更新与重烘托

组件生命周期详解

高效更新组件

Hooks简介

useState和useEffect

自定义Hooks

React Hooks内部机制深度剖析

useState深化

useEffect具体原理

Hooks与Fiber架构

React Context API 深度解析

Context API概述

Context底层原理

Context作业流程

高档运用

Context与Fiber架构

React功能优化高档战略

运用React.memo优化函数组件

运用useCallback和useMemo防止不必要的核算

运用懒加载（Lazy Loading）优化大型组件树

运用Fiber架构优势进行使命切割

运用useReducer优化杂乱组件的状况办理

React高档功能优化技能深度讨论

优化烘托进程中的不行变数据模式

运用React的批处理（Batching）特性

运用shouldComponentUpdate和React.PureComponent精确操控更新

优化大型列表的烘托

运用React Fiber架构的并发特性

总结

相关文章

go sync.Map 设计与实现

Flutter基建 – 形影不离的State**Widget

[译]Flutter用WebView插件webview_flutter

推荐系统：协同过滤

作者信息

运用`React.memo`优化函数组件

运用`useCallback`和`useMemo`防止不必要的核算

运用`useReducer`优化杂乱组件的状况办理

运用`shouldComponentUpdate`和`React.PureComponent`精确操控更新