• Queueing. 浏览器在以下情况下将请求排入队列：

  • 有更高优先级的请求。
  • 已为该来源打开了六个TCP连接，这是限制。仅适用于HTTP / 1.0和HTTP / 1.1。
  • 浏览器正在磁盘缓存中短暂分配空间
• Stalled. 出于Queueing描述的任何原因，该请求都可能被暂停。
• DNS Lookup. 浏览器正在解析请求的IP地址
• Proxy negotiation. 流览器正在与代理服务器协商请求。
• Request sent. 正在发送请求。
• ServiceWorker Preparation. 浏览器正在启动 service worker.
• Request to ServiceWorker. 正在向 service worker发送请求.
• Waiting (TTFB). 浏览器正在等待响应的第一个字节。TTFB代表到第一个字节的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间。
• Content Download. 浏览器正在接收响应。
• Receiving Push. 浏览器正在接收HTTP/2服务器推送的响应数据。.
• Reading Push. 浏览器正在读取先前接收的本地数据。

作者：Alex
译者：前端小智
来源：dev.to

点赞再看，养成习惯

本文 GitHubhttps://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

问题1：什么是虚拟DOM？

主题: React
难度: ⭐

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。

问题2：类组件和函数组件之间的区别是啥？

主题: React
难度: ⭐⭐

• 类组件可以使用其他特性，如状态 state 和生命周期钩子。
• 当组件只是接收 props 渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

问题 3：React 中 refs 干嘛用的？

主题: React
难度: ⭐⭐

Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs。

咱们可以在组件添加一个 ref 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

请注意，input 元素有一个ref属性，它的值是一个函数。该函数接收输入的实际 DOM 元素，然后将其放在实例上，这样就可以在 handleSubmit 函数内部访问它。

经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

问题 4：在 React 中如何处理事件

主题: React
难度: ⭐⭐

为了解决跨浏览器的兼容性问题，SyntheticEvent 实例将被传递给你的事件处理函数，SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。

比较有趣的是，React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着 React 在更新 DOM 时不需要跟踪事件监听器。

问题 5：state 和 props 区别是啥？

主题: React
难度: ⭐⭐

props和state是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即

• state 是组件自己管理数据，控制自己的状态，可变；
• props 是外部传入的数据参数，不可变；
• 没有state的叫做无状态组件，有state的叫做有状态组件；
• 多用 props，少用 state，也就是多写无状态组件。

问题 6：如何创建 refs

主题: React
难度: ⭐⭐

Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

或者这样用：

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} /> // Access DOM input in handle submit
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

问题 7：什么是高阶组件？

主题: React
难度: ⭐⭐

高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 可以用于以下许多用例

• 代码重用、逻辑和引导抽象
• 渲染劫持
• state 抽象和操作
• props 处理

问题 8：在构造函数调用 super 并将 props 作为参数传入的作用是啥？

主题: React
难度: ⭐⭐

在调用 super() 方法之前，子类构造函数无法使用this引用，ES6 子类也是如此。将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props。

传递 props

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);  // { name: 'sudheer',age: 30 }
  }
}

没传递 props

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
    // 但是 Props 参数仍然可用
    console.log(props); // Prints { name: 'sudheer',age: 30 }
  }

  render() {
    // 构造函数外部不受影响
    console.log(this.props) // { name: 'sudheer',age: 30 }
  }
}

上面示例揭示了一点。props 的行为只有在构造函数中是不同的，在构造函数之外也是一样的。

问题 9：什么是控制组件？

主题: React
难度: ⭐⭐⭐

在 HTML 中，表单元素如 <input>、<textarea>和<select>通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。

而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如onChange)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。

问题 10：如何 React.createElement ？

主题: React
难度: ⭐⭐⭐

问题：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
)

上述代码如何使用 React.createElement 来实现:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

问题 11：讲讲什么是 JSX ？

主题: React
难度: ⭐⭐⭐

当 Facebook 第一次发布 React 时，他们还引入了一种新的 JS 方言 JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。

class MyComponent extends React.Component {
  render() {
    let props = this.props;  
    return (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}

问题 12：根据下面定义的代码，可以找出存在的两个问题吗 ？

主题: React
难度: ⭐⭐⭐

请看下面的代码：

答案：

1.在构造函数没有将 props 传递给 super，它应该包括以下行

constructor(props) {
  super(props);
  // ...
}

2.事件监听器(通过addEventListener()分配时)的作用域不正确，因为 ES6 不提供自动绑定。因此，开发人员可以在构造函数中重新分配clickHandler来包含正确的绑定:

constructor(props) {
  super(props);
  this.clickHandler = this.clickHandler.bind(this);
  // ...
}

问题 13：为什么不直接更新 state 呢 ?

主题: React
难度: ⭐⭐⭐

如果试图直接更新 state ，则不会重新渲染组件。

 // 错误
 This.state.message = 'Hello world';

需要使用setState()方法来更新 state。它调度对组件state对象的更新。当state改变时，组件通过重新渲染来响应：

// 正确做法
This.setState({message: ‘Hello World’});

问题 14：React 组件生命周期有哪些不同阶段？

主题: React
难度: ⭐⭐⭐

在组件生命周期中有四个不同的阶段：

1. Initialization：在这个阶段，组件准备设置初始化状态和默认属性。
2. Mounting：react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括componentWillMount和componentDidMount生命周期方法。
3. Updating：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。
4. Unmounting：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 componentWillUnmount 生命周期方法。

除以上四个常用生命周期外，还有一个错误处理的阶段：

Error Handling：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了 componentDidCatch 生命周期方法。

问题 15：React 的生命周期方法有哪些？

主题: React
难度: ⭐⭐⭐

• componentWillMount:在渲染之前执行，用于根组件中的 App 级配置。
• componentDidMount：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。
• componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染
• shouldComponentUpdate：确定是否更新组件。默认情况下，它返回true。如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。
• componentWillUpdate：在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。
• componentDidUpdate：它主要用于更新DOM以响应props或state更改。
• componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。

问题 16：这三个点(...)在 React 干嘛用的？

主题: React
难度: ⭐⭐⭐

... 在React（使用JSX）代码中做什么？它叫什么？

<Modal {...this.props} title='Modal heading'  animation={false}/>

这个叫扩展操作符号或者展开操作符，例如，如果this.props包含a：1和b：2，则

<Modal {...this.props} title='Modal heading' animation={false}>

等价于下面内容：

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

扩展符号不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象非常方便，在更新state 咱们就经常这么做：

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

问题 17：使用 React Hooks 好处是啥？

主题: React
难度: ⭐⭐⭐

首先，Hooks 通常支持提取和重用跨多个组件通用的有状态逻辑，而无需承担高阶组件或渲染 props 的负担。Hooks 可以轻松地操作函数组件的状态，而不需要将它们转换为类组件。

Hooks 在类中不起作用，通过使用它们，咱们可以完全避免使用生命周期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount。相反，使用像useEffect这样的内置钩子。

问题 18：什么是 React Hooks？

主题: React
难度: ⭐⭐⭐

Hooks是 React 16.8 中的新添加内容。它们允许在不编写类的情况下使用state和其他 React 特性。使用 Hooks，可以从组件中提取有状态逻辑，这样就可以独立地测试和重用它。Hooks 允许咱们在不改变组件层次结构的情况下重用有状态逻辑，这样在许多组件之间或与社区共享 Hooks 变得很容易。

问题 19：React 中的 useState() 是什么？

主题: React
难度: ⭐⭐⭐

下面说明useState(0)的用途：

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

useState 是一个内置的 React Hook。useState(0) 返回一个元组，其中第一个参数count是计数器的当前状态，setCounter 提供更新计数器状态的方法。

咱们可以在任何地方使用setCounter方法更新计数状态-在这种情况下，咱们在setCount函数内部使用它可以做更多的事情，使用 Hooks，能够使咱们的代码保持更多功能，还可以避免过多使用基于类的组件。

问题 20：React 中的StrictMode(严格模式)是什么？？

主题: React
难度: ⭐⭐⭐

React 的StrictMode是一种辅助组件，可以帮助咱们编写更好的 react 组件，可以使用<StrictMode />包装一组组件，并且可以帮咱们以下检查：

• 验证内部组件是否遵循某些推荐做法，如果没有，会在控制台给出警告。
• 验证是否使用的已经废弃的方法，如果有，会在控制台给出警告。
• 通过识别潜在的风险预防一些副作用。

问题 21：为什么类方法需要绑定到类实例？

主题: React
难度: ⭐⭐⭐

在 JS 中，this 值会根据当前上下文变化。在 React 类组件方法中，开发人员通常希望 this 引用组件的当前实例，因此有必要将这些方法绑定到实例。通常这是在构造函数中完成的:

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

问题 22：什么是 prop drilling，如何避免？

主题: React
难度: ⭐⭐⭐

在构建 React 应用程序时，在多层嵌套组件来使用另一个嵌套组件提供的数据。最简单的方法是将一个 prop 从每个组件一层层的传递下去，从源组件传递到深层嵌套组件，这叫做prop drilling。

prop drilling的主要缺点是原本不需要数据的组件变得不必要地复杂，并且难以维护。

为了避免prop drilling，一种常用的方法是使用React Context。通过定义提供数据的Provider组件，并允许嵌套的组件通过Consumer组件或useContext Hook 使用上下文数据。

问题 23：描述 Flux 与 MVC？

主题: React
难度: ⭐⭐⭐

传统的 MVC 模式在分离数据(Model)、UI(View和逻辑(Controller)方面工作得很好，但是 MVC 架构经常遇到两个主要问题:

数据流不够清晰:跨视图发生的级联更新常常会导致混乱的事件网络，难于调试。

缺乏数据完整性:模型数据可以在任何地方发生突变，从而在整个UI中产生不可预测的结果。

使用 Flux 模式的复杂用户界面不再遭受级联更新，任何给定的React 组件都能够根据 store 提供的数据重建其状态。Flux 模式还通过限制对共享数据的直接访问来加强数据完整性。

问题 24：受控组件和非受控组件区别是啥？

主题: React
难度: ⭐⭐⭐

• 受控组件是 React 控制中的组件，并且是表单数据真实的唯一来源。
• 非受控组件是由 DOM 处理表单数据的地方，而不是在 React 组件中。

尽管非受控组件通常更易于实现，因为只需使用refs即可从 DOM 中获取值，但通常建议优先选择受控制的组件，而不是非受控制的组件。

这样做的主要原因是受控组件支持即时字段验证，允许有条件地禁用/启用按钮，强制输入格式。

问题 25：这段代码有什么问题吗？

主题: React
难度: ⭐⭐⭐⭐

这段代码有什么问题:

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})

答案：

没有什么问题。这种方式很少被使用，咱们可以将一个函数传递给setState，该函数接收上一个 state 的值和当前的props，并返回一个新的状态，如果咱们需要根据以前的状态重新设置状态，推荐使用这种方式。

问题 26：什么是 React Context?

主题: React
难度: ⭐⭐⭐⭐

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

问题 27：什么是 React Fiber?

主题: React
难度: ⭐⭐⭐⭐

Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。

React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。

问题 28：如何在 ReactJS 的 Props上应用验证？

主题: React
难度: ⭐⭐⭐⭐

当应用程序在开发模式下运行时，React 将自动检查咱们在组件上设置的所有 props，以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的 props 用 isRequired定义的。

下面是一组预定义的 prop 类型:

• React.PropTypes.string
• React.PropTypes.number
• React.PropTypes.func
• React.PropTypes.node
• React.PropTypes.bool

例如，咱们为用户组件定义了如下的propTypes

import PropTypes from 'prop-types';

class User extends React.Component {
  render() {
    return (
      <h1>Welcome, {this.props.name}</h1>
      <h2>Age, {this.props.age}
    );
  }
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

问题 29：在 React 中使用构造函数和 getInitialState 有什么区别？

主题: React
难度: ⭐⭐⭐⭐

构造函数和getInitialState之间的区别就是ES6和ES5本身的区别。在使用ES6类时，应该在构造函数中初始化state，并在使用React.createClass时定义getInitialState方法。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

等价于：

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

问题 30：如何有条件地向 React 组件添加属性？

主题: React
难度: ⭐⭐⭐⭐

对于某些属性，React 非常聪明，如果传递给它的值是虚值，可以省略该属性。例如：

var InputComponent = React.createClass({
    render: function() {
      var required = true;
      var disabled = false;

      return (
        <input type="text" disabled={disabled} required={required} />
      );
    }
});

渲染结果：

<input type="text" required>

另一种可能的方法是：

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

问题 31：Hooks会取代 render props 和高阶组件吗？

主题: React
难度: ⭐⭐⭐⭐

通常，render props和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。

这两种模式仍然有一席之地(例如，一个虚拟的 scroller 组件可能有一个 renderItem prop，或者一个可视化的容器组件可能有它自己的 DOM 结构)。但在大多数情况下，Hooks 就足够了，可以帮助减少树中的嵌套。

问题 32：如何避免组件的重新渲染？

主题: React
难度: ⭐⭐⭐⭐

React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法，在这些情况下非常有用：

• React.memo():这可以防止不必要地重新渲染函数组件
• PureComponent:这可以防止不必要地重新渲染类组件

这两种方法都依赖于对传递给组件的props的浅比较，如果 props 没有改变，那么组件将不会重新渲染。虽然这两种工具都非常有用，但是浅比较会带来额外的性能损失，因此如果使用不当，这两种方法都会对性能产生负面影响。

通过使用 React Profiler，可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能。

问题 33：什么是纯函数？

主题: React
难度: ⭐⭐⭐⭐⭐

纯函数是不依赖并且不会在其作用域之外修改变量状态的函数。本质上，纯函数始终在给定相同参数的情况下返回相同结果。

问题 34：当调用setState时，React render 是如何工作的？

主题: React
难度: ⭐⭐⭐⭐⭐

咱们可以将"render"分为两个步骤：

1. 虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用setState()时，render会被再次调用，因为默认情况下shouldComponentUpdate总是返回true，所以默认情况下 React 是没有优化的。
2. 原生 DOM 渲染:React 只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少——这是很棒的React特性，它优化了真实DOM的变化，使React变得更快。

问题 35：如何避免在React重新绑定实例？

主题: React
难度: ⭐⭐⭐⭐⭐

有几种常用方法可以避免在 React 中绑定方法：

1.将事件处理程序定义为内联箭头函数

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
  }

  render() {
    return (
      <button onClick={() => {
        this.setState({ isFormSubmitted: true });
      }}>Submit</button>
    )
  }
}

2.使用箭头函数来定义方法：

class SubmitButton extends React.Component {
  state = {
    isFormSubmitted: false
  }

  handleSubmit = () => {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

3.使用带有 Hooks 的函数组件

const SubmitButton = () => {
  const [isFormSubmitted, setIsFormSubmitted] = useState(false);

  return (
    <button onClick={() => {
        setIsFormSubmitted(true);
    }}>Submit</button>
  )
};

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://www.gangboard.com/blo...

交流

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复福利，即可看到福利，你懂的。

双位置语法

假设我们想要得到以下结果：带有一束等宽的垂直条纹的渐变

颜色的十六进制值为：#5461c8，#c724b1，#e4002b，#ff6900，#f6be00，#97d700，#00ab84和#00a3e0。

如果我们使用linear-gradient实现：

linear-gradient(90deg,  
    #5461c8  12.5%  /* 1*12.5% */,  
    #c724b1  0,  #c724b1  25%  /* 2*12.5% */,  
    #e4002b  0,  #e4002b  37.5%  /* 3*12.5% */,  
    #ff6900  0,  #ff6900  50%  /* 4*12.5% */,  
    #f6be00  0,  #f6be00  62.5%  /* 5*12.5% */,  
    #97d700  0,  #97d700  75%  /* 6*12.5% */,  
    #00ab84  0,  #00ab84  87.5%  /* 7*12.5% */,  
    #00a3e0  0)

虽然实现了需求，但代码看起来不太美观。其实我们还可以使用双位置语法：

linear-gradient(90deg,  
#5461c8  12.5%,  
#c724b1  0  25%,  
#e4002b  0  37.5%,  
#ff6900  0  50%, 
#f6be00  0  62.5%,  
#97d700  0  75%,  
#00ab84  0  87.5%,  
#00a3e0  0)

是不是看上去更简洁一点呢？

repeating-linear-gradient

加入设计师给了这么一个背景：

这时候再使用linear-gradient就可能有些力不从心了，不过我们可以使用repeating-linear-gradient，代码如下：

repeating-linear-gradient(-45deg, #ccc, #ccc 2px, transparent 0, transparent 9px)

是不是很简单呢？

前言：canvas动画入门系列之简单连线动画。虽然简单，但连线动画应用场景还挺多，因此做了个小demo，一通百通。

step1：绘制点

首先创建个标签<canvas id="canvas" width="400" height="400"></canvas>
设置几个点的坐标

    const points = [
        [200, 100], //上
        [300, 200], //右
        [100, 200], //左
        [200, 100], //上
        [200, 300], //下
        [100, 200], //左
        [300, 200], //右
        [200, 300]
      ];
      const canvas = document.querySelector("canvas");
      const ctx = canvas.getContext("2d");

然后把点给画出来

points.forEach(([x, y]) => {
          drawDot(x, y);
        });
function drawDot(x1, y1, r) {
          ctx.save();
          ctx.beginPath(); //不写会和线连起来
          ctx.fillStyle = "red";
          //绘制成矩形
          ctx.arc(x1, y1, r ? r : 2, 0, 2 * Math.PI);
          ctx.fill();
          ctx.restore();
        }

step2：绘制线条

我们封装一个方法,传入起点终点，绘制一根线条

function drawLine(x1, y1, x2, y2) {
          ctx.save();
          ctx.beginPath(); //不写每次都会重绘上次的线
          ctx.lineCap = "round";
          ctx.lineJoin = "round";
          var grd = ctx.createLinearGradient(x1, y1, x2, y2);

          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.closePath();
          ctx.strokeStyle = "rgba(255,255,255,1)";
          ctx.stroke();
          ctx.restore();
        }

step3：线条动画

这里面需要计算两点之间的斜率，然后x坐标每次挪动±1单位，已知斜率和x偏移，即可计算出y的偏移。值得注意的是，这个坐标系和数学中的xy坐标系有点不一样，y轴是反的。然后可以引入额外的参数speed控制速度

function lineMove(points) {
          if (points.length < 2) {
              
            return;
          }
          const [[x1, y1], [x2, y2]] = points;
          let dx = x2 - x1;
          let dy = y2 - y1;
          if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {
            points = points.slice(1);
            lineMove(points);
            return;
          }
          let x = x1,
            y = y1; //线条绘制过程中的终点
          if (dx === 0) {
            (x = x2), (y += (speed * dy) / Math.abs(dy));
          } else if (dy === 0) {
            x += (speed * dx) / Math.abs(dx);
            y = y2;
          } else if (Math.abs(dx) >= 1) {
            let rate = dy / dx;
            x += (speed * dx) / Math.abs(dx);
            y += (speed * rate * dx) / Math.abs(dx);
          }
          drawLine(x1, y1, x, y);
          points[0] = [x, y];
          window.requestAnimationFrame(function() {
            lineMove(points);
          });
        }

主要代码就这么多，先看效果

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>canvas-连线动画</title>
</head>

<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    //起点：10，20 终点：150，200
    const points = [
      [200, 100], //上
      [300, 200], //右
      [100, 200], //左
      [200, 100], //上
      [200, 300], //下
      [100, 200], //左
      [300, 200], //右
      [200, 300]
    ];
    const canvas = document.querySelector("canvas");
    const ctx = canvas.getContext("2d");
    // const img = new Image();
    const speed = 10; //速度
    // img.onload = function() {
    // canvas.width = img.width;
    // canvas.height = img.height;
    animate(ctx);
    // };

    // img.src = "./imgs/demo.png";
    function animate(ctx) {
      // ctx.drawImage(img, 0, 0);
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      points.forEach(([x, y]) => {
        drawDot(x, y);
      });
      lineMove(points);
    }
    function lineMove(points) {
      if (points.length < 2) {
        return;
      }
      const [[x1, y1], [x2, y2]] = points;
      let dx = x2 - x1;
      let dy = y2 - y1;
      if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {
        points = points.slice(1);
        lineMove(points);
        return;
      }
      let x = x1,
        y = y1; //线条绘制过程中的终点
      if (dx === 0) {
        (x = x2), (y += (speed * dy) / Math.abs(dy));
      } else if (dy === 0) {
        x += (speed * dx) / Math.abs(dx);
        y = y2;
      } else if (Math.abs(dx) >= 1) {
        let rate = dy / dx;
        x += (speed * dx) / Math.abs(dx);
        y += (speed * rate * dx) / Math.abs(dx);
      }
      drawLine(x1, y1, x, y);
      points[0] = [x, y];
      window.requestAnimationFrame(function () {
        lineMove(points);
      });
    }

    function drawLine(x1, y1, x2, y2) {
      ctx.save();
      ctx.beginPath(); //不写每次都会重绘上次的线
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      var grd = ctx.createLinearGradient(x1, y1, x2, y2);

      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.closePath();
      ctx.strokeStyle = "rgba(255,255,255,1)";
      ctx.stroke();
      ctx.restore();
    }

    function drawDot(x1, y1, r) {
      ctx.save();
      ctx.beginPath(); //不写会和线连起来
      ctx.fillStyle = "red";
      //绘制成矩形
      ctx.arc(x1, y1, r ? r : 2, 0, 2 * Math.PI);
      ctx.fill();
      ctx.restore();
    }
  </script>
</body>

</html>

前言：马上过年了，我打算在后台里面偷偷地埋个新春祝福+放烟花的彩蛋。项目是基于react+typescript的，因此最后封装成了一个组件，设置好开启时间就可以显示了。

目录结构

目录结构大致如下

我们将烟花分为两个阶段，一个是未炸开持续上升时期，另一个是炸开后分散的时期。
其中Vector表示一个坐标，Particle表示一个烟花的亮点，Firewor表示烟花未炸开时持续上升的亮点。index.tsx就是组件了，绘制了canvas，并执行了动画。

Vector

这个坐标就很简单，后面涉及到位置的变更都可以使用它的add方法进行偏移操作

export default class Vector {
    constructor(public x: number, public y: number) {}
    add(vec2: {x: number; y: number}) {
        this.x = this.x + vec2.x;
        this.y = this.y + vec2.y;
    }
}

Particle

初始创建的时候给个坐标，后续每次更新的时候控制y坐标下落，gravity变量就是下落的值。timeSpan用于控制烟花展示的时长

import Vector from './Vector';
export default class Particle {
    pos: Vector = null;
    vel: {x: number; y: number} = null;
    dead: boolean = false;
    start: number = 0;
    ctx: CanvasRenderingContext2D = null;
    constructor(pos: {x: number; y: number}, vel: {x: number; y: number}, ctx: CanvasRenderingContext2D) {
        this.pos = new Vector(pos.x, pos.y);
        this.vel = vel;
        this.dead = false;
        this.start = 0;
        this.ctx = ctx;
    }
    update(time: number, gravity: number) {
        let timeSpan = time - this.start;

        if (timeSpan > 500) {
            this.dead = true;
        }

        if (!this.dead) {
            this.pos.add(this.vel);
            this.vel.y = this.vel.y + gravity;
        }
    }

    draw() {
        if (!this.dead) {
            this.drawDot(this.pos.x, this.pos.y, Math.random() > 0.5 ? 1 : 2);
        }
    }
    drawDot(x: number, y: number, size: number) {
        this.ctx.beginPath();
        this.ctx.arc(x, y, size, 0, Math.PI * 2);
        this.ctx.fill();
        this.ctx.closePath();
    }
}

Firework

生成随机的hsl颜色，hsl(' + rndNum(360) + ', 100%, 60%);Firework每次上升的距离是一个递减的过程，我们初始设置一个上升的距离，之后每次绘制的时候，这个距离减gravity，当距离小于零的时候，说明该出现烟花绽放的动画了。

import Vector from './Vector';
import Particle from './Particle';
let rnd = Math.random;
function rndNum(num: number) {
    return rnd() * num + 1;
}
export default class Firework {
    pos: Vector = null;
    vel: Vector = null;
    color: string = null;
    size: number = 0;
    dead: boolean = false;
    start: number = 0;
    ctx: CanvasRenderingContext2D = null;
    gravity: number = null;
    exParticles: Particle[] = [];
    exPLen: number = 100;
    rootShow: boolean = true;
    constructor(x: number, y: number, gravity: number, ctx: CanvasRenderingContext2D) {
        this.pos = new Vector(x, y);
        this.vel = new Vector(0, -rndNum(10) - 3);
        this.color = 'hsl(' + rndNum(360) + ', 100%, 60%)';
        this.size = 4;
        this.dead = false;
        this.start = 0;
        this.ctx = ctx;
        this.gravity = gravity;
    }
    update(time: number, gravity: number) {
        if (this.dead) {
            return;
        }

        this.rootShow = this.vel.y < 0;

        if (this.rootShow) {
            this.pos.add(this.vel);
            this.vel.y = this.vel.y + gravity;
        } else {
            if (this.exParticles.length === 0) {
                for (let i = 0; i < this.exPLen; i++) {
                    let randomR = rndNum(5);
                    let randomX = -rndNum(Math.abs(randomR) * 2) + Math.abs(randomR);
                    let randomY =
                        Math.sqrt(Math.abs(Math.pow(randomR, 2) - Math.pow(randomX, 2))) *
                        (Math.random() > 0.5 ? 1 : -1);
                    this.exParticles.push(new Particle(this.pos, new Vector(randomX, randomY), this.ctx));
                    this.exParticles[this.exParticles.length - 1].start = time;
                }
            }
            let numOfDead = 0;
            for (let i = 0; i < this.exPLen; i++) {
                let p = this.exParticles[i];
                p.update(time, this.gravity);
                if (p.dead) {
                    numOfDead++;
                }
            }

            if (numOfDead === this.exPLen) {
                this.dead = true;
            }
        }
    }

    draw() {
        if (this.dead) {
            return;
        }

        this.ctx.fillStyle = this.color;
        if (this.rootShow) {
            this.drawDot(this.pos.x, this.pos.y, this.size);
        } else {
            for (let i = 0; i < this.exPLen; i++) {
                let p = this.exParticles[i];
                p.draw();
            }
        }
    }
    drawDot(x: number, y: number, size: number) {
        this.ctx.beginPath();

        this.ctx.arc(x, y, size, 0, Math.PI * 2);
        this.ctx.fill();

        this.ctx.closePath();
    }
}

FireworkComponent

组件本身就很简单了，生成和绘制Firework。我们在这里面可以额外加一些文字

import React from 'react';
import Firework from './Firework';
import {autobind} from 'core-decorators';
let rnd = Math.random;
function rndNum(num: number) {
    return rnd() * num + 1;
}
interface PropTypes {
    onClick?: () => void;
}
@autobind
class FireworkComponent extends React.Component<PropTypes> {
    canvas: HTMLCanvasElement = null;
    ctx: CanvasRenderingContext2D = null;
    snapTime: number = 0;
    fireworks: Firework[] = [];
    gravity: number = 0.1;
    componentDidMount() {
        this.canvas = document.querySelector('#fireworks');
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.ctx = this.canvas.getContext('2d');
        this.init();
        this.draw();
    }

    init() {
        let numOfFireworks = 20;
        for (let i = 0; i < numOfFireworks; i++) {
            this.fireworks.push(new Firework(rndNum(this.canvas.width), this.canvas.height, this.gravity, this.ctx));
        }
    }

    update(time: number) {
        for (let i = 0, len = this.fireworks.length; i < len; i++) {
            let p = this.fireworks[i];
            p.update(time, this.gravity);
        }
    }
    draw(time?: number) {
        this.update(time);

        this.ctx.fillStyle = 'rgba(0,0,0,0.3)';

        this.ctx.fillStyle = 'rgba(0,0,0,0)';
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        this.ctx.font = 'bold 30px cursive';
        this.ctx.fillStyle = '#e91818';
        let text = 'XX项目组给您拜个早年！';
        let textWidth = this.ctx.measureText(text);
        this.ctx.fillText(text, this.canvas.width / 2 - textWidth.width / 2, 200);
        text = '在新年来临之际，祝您：';
        textWidth = this.ctx.measureText(text);
        this.ctx.fillText(text, this.canvas.width / 2 - textWidth.width / 2, 260);
        text = '工作顺利，新春快乐!';
        this.ctx.font = 'bold 48px STCaiyun';
        this.ctx.fillStyle = 'orangered';
        textWidth = this.ctx.measureText(text);
        this.ctx.fillText(text, this.canvas.width / 2 - textWidth.width / 2, 340);
        this.ctx.fillStyle = 'gray';
        this.ctx.font = '18px Arial';
        text = '点击任意处关闭';
        textWidth = this.ctx.measureText(text);
        this.ctx.fillText(text, this.canvas.width - 20 - textWidth.width, 60);
        this.snapTime = time;

        this.ctx.fillStyle = 'blue';
        for (let i = 0, len = this.fireworks.length; i < len; i++) {
            let p = this.fireworks[i];
            if (p.dead) {
                p = this.fireworks[i] = new Firework(
                    rndNum(this.canvas.width),
                    this.canvas.height,
                    this.gravity,
                    this.ctx
                );
                p.start = time;
            }
            p.draw();
        }

        window.requestAnimationFrame(this.draw);
    }

    render() {
        return (
            <canvas
                id="fireworks"
                onClick={this.props.onClick}
                style={{position: 'fixed', zIndex: 99, background: 'rgba(0,0,0, 0.8)'}}
                width="400"
                height="400"></canvas>
        );
    }
}
export default FireworkComponent;

大致效果

前言：开发环境没接jenkins，每次打完包后需要手动压缩上传服务器再解压，体验比较差，因此打算写个自动部署的脚本，在这之前呢，需要对我们打包后的文件做个压缩。

jszip

这里用到的库是jszip，主要就三个关键方法：

• const zip = new JSZIP()：我们需要新建一个实例，这个实例保存着需要压缩的数据和目录结构

• zip.generateAsync：返回一个promise，then的参数就是压缩后的内容，可以通过fs.writeFile写成zip文件。参数是一个对象

  {
      type: 'nodebuffer',
      compression: 'DEFLATE', //压缩算法
      compressionOptions: {
          level: 9 //压缩等级
      }
  }

• zip.folder:如果是一个文件夹，需要用这个方法生成zip文件中对应的文件夹
• zip.file：压缩一个文件

举个例子：打包后的文件在根目录下的prod文件夹中，在根目录下新建一个zip.js,具体代码如下

const path = require('path');
const JSZIP = require('jszip');
const fs = require('fs');

const zip = new JSZIP();

pushZip(zip, path.resolve(__dirname, './prod'));
zip.generateAsync({
    type: 'nodebuffer',
    compression: 'DEFLATE',
    compressionOptions: {
        level: 9
    }
}).then(function(content) {
    fs.writeFile(path.resolve(__dirname, './prod/XX.zip'), content, err => {
        if (err) throw err;
        console.log('文件已被保存');
    });
});

function pushZip(floder, pPath) {
    const files = fs.readdirSync(pPath, {withFileTypes: true});
    files.forEach((dirent, index) => {
        let filePath = `${pPath}/${dirent.name}`;
        if (dirent.isDirectory()) {
            let zipFloder = zip.folder(filePath.replace(`${__dirname}\\prod/`, ''));
            pushZip(zipFloder, filePath);
        } else {
            floder.file(dirent.name, fs.readFileSync(filePath));
        }
    });
}

执行node zip.js即可看到prod文件夹中多了一个XX.zip文件