useState：让函数式组件能保存状态#

前面有说过之所以之前没有函数式组件就是因为函数多次执行无法保存状态，这个Hook就是用来解决这个问题的。也就是说在一个函数式组件多次渲染过程中，这个state是共享的。

1
import React, { useState } from 'react';
2

3
function Example() {
4
  // 创建一个保存 count 的 state，并给初始值 0
5
  const [count, setCount] = useState(0);
6

7
  return (
8
    <div>
9
      <p>{count}</p>
10
      <button onClick={() => setCount(count + 1)}>
11
        +
12
      </button>
13
    </div>
14
  );
15
}

在这个例子中

用useState(0)设置了count的初始值是0，渲染出p标签内容是0

当每次点击button时，调用setCount修改了count后，都会重新执行这个Example函数组件，然后使用useState返回的新的被更改后的count值，再更新对应的DOM节点

总结下就是：

1. useState(initialState) 的参数 initialState 是创建 state 的初始值，它可以是任意类型，比如数字、对象、数组等等。
2. useState() 的返回值是一个有着两个元素的数组。第一个数组元素用来读取 state 的值，第二个则是用来设置这个 state 的值。在这里要注意的是，state 的变量（例子中的 count）是只读的，所以我们必须通过第二个数组元素 setCount 来设置它的值。
3. 如果要创建多个 state，那么我们就需要多次调用 useState。比如要创建多个 state，使用的代码如下：

1
// 定义一个年龄的 state，初始值是 42
2
const [age, setAge] = useState(42);
3
// 定义一个水果的 state，初始值是 banana
4
const [fruit, setFruit] = useState('banana');
5
// 定一个一个数组 state，初始值是包含一个 todo 的数组
6
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

和之前的类组件的区别，类组件是只维护了一个state对象(如上述例子{age: 42, fruit: ‘banana’, todos:[text: ‘Learn Hooks’]})，通过setState更新组件内所有状态。而函数式组件是每个字段都有对应的state，逻辑上更分离，粒度更细。

useEffect：执行副作用#

useEffect ，顾名思义，用于执行一段副作用。

副作用就是除了计算外,对当前函数执行上下文或是宿主,外部环境造成影响的, 就是副作用。比如

• 操作DOM
• 订阅事件
• 接口请求
• 改变全局变量
• 调用浏览器的个别API(setTimeout)。

1
import React, { useState, useEffect } from "react";
2

3
function BlogView({ id }) {
4
  // 设置一个本地 state 用于保存 blog 内容
5
  const [blogContent, setBlogContent] = useState(null);
6

7
  useEffect(() => {
8
    // useEffect 的 callback 要避免直接的 async 函数，需要封装一下
9
    const doAsync = async () => {
10
      // 当 id 发生变化时，将当前内容清楚以保持一致性
11
      setBlogContent(null);
12
      // 发起请求获取数据
13
      const res = await fetch(`/blog-content/${id}`);
14
      // 将获取的数据放入 state
15
      setBlogContent(await res.text());
16
    };
17
    doAsync();
18
  }, [id]); // 使用 id 作为依赖项，变化时则执行副作用
19

20
  // 如果没有 blogContent 则认为是在 loading 状态
21
  const isLoading = !blogContent;
22
  return <div>{isLoading ? "Loading..." : blogContent}</div>;
23
}

1
function Sample() {
2
  // 这里在每次组件执行时创建了一个新数组
3
  const todos = [{ text: 'Learn hooks.'}];
4
  useEffect(() => {
5
    console.log('Todos changed.');
6
  }, [todos]);
7
}

1
 todos每次都是重新创建的，导致引用地址不同，从而会导致更新

useCallback: 缓存回调函数#

1
function Counter() {
2
  const [count, setCount] = useState(0);
3
  const handleIncrement = () => setCount(count + 1);
4
  // ...
5
  return <button onClick={handleIncrement}>+</button>
6
}

1
import React, { useState, useCallback } from 'react';
2

3
function Counter() {
4
  const [count, setCount] = useState(0);
5
  const handleIncrement = useCallback(
6
    () => setCount(count + 1),
7
    [count], // 只有当 count 发生变化时，才会重新创建回调函数
8
  );
9
  // ...
10
  return <button onClick={handleIncrement}>+</button>
11
}

useMemo: 缓存计算的结果#

1
import React, { useState, useEffect } from "react";
2

3
export default function SearchUserList() {
4
  const [users, setUsers] = useState(null);
5
  const [searchKey, setSearchKey] = useState("");
6

7
  useEffect(() => {
8
    const doFetch = async () => {
9
      // 组件首次加载时发请求获取用户数据
10
      const res = await fetch("https://reqres.in/api/users/");
11
      setUsers(await res.json());
12
    };
13
    doFetch();
14
  }, []);
15
  let usersToShow = null;
16

17
  if (users) {
18
    // 无论组件为何刷新，这里一定会对数组做一次过滤的操作
19
    usersToShow = users.data.filter((user) =>
20
      user.first_name.includes(searchKey),
21
    );
22
  }
23

24
  return (
25
    <div>
26
      <input
27
        type="text"
28
        value={searchKey}
29
        onChange={(evt) => setSearchKey(evt.target.value)}
30
      />
31
      <ul>
32
        {usersToShow &&
33
          usersToShow.length > 0 &&
34
          usersToShow.map((user) => {
35
            return <li key={user.id}>{user.first_name}</li>;
36
          })}
37
      </ul>
38
    </div>
39
  );
40
}

1
//...
2
// 使用 userMemo 缓存计算的结果
3
const usersToShow = useMemo(() => {
4
    if (!users) return null;
5
    return users.data.filter((user) => {
6
      return user.first_name.includes(searchKey));
7
    }
8
  }, [users, searchKey]);
9
//...

1
useCallback(fn, deps) === useMemo(() => fn, deps)

useRef: 在多次渲染之间共享数据#

1
const queryRef = useRef({
2
  code1: '',
3
  code2: ''
4
});
5

6
const PrintBtn = () => {
7
  console.log('testBtn', queryRef.current); // 永远都是获取到最新的值
8
};

1
function TimerComponent() {
2
  const intervalId = useRef(null);
3
  const handleStart = () => {
4
    intervalId.current = setInterval(() => {
5
      console.log('Timer tick');
6
    }, 1000);
7
  };
8
  const handleStop = () => {
9
    clearInterval(intervalId.current);
10
  };
11
  return (
12
    <div>
13
      <button onClick={handleStart}>Start</button>
14
      <button onClick={handleStop}>Stop</button>
15
    </div>
16
  );
17
}

1
function usePrevious(value) {
2
  const ref = useRef();
3
  useEffect(() => {
4
    ref.current = value;
5
  });
6
  return ref.current;
7
}

1
import React, { useRef } from 'react';
2

3
function TextInputWithFocusButton() {
4
  const inputEl = useRef(null);
5

6
  const onButtonClick = () => {
7
    inputEl.current.focus();
8
  };
9

10
  return (
11
    <>
12
      <input ref={inputEl} type="text" />
13
      <button onClick={onButtonClick}>Focus the input</button>
14
    </>
15
  );
16
}

useContext: 定义全局状态#

1
const themes = {
2
  light: {
3
    foreground: "#000000",
4
    background: "#eeeeee"
5
  },
6
  dark: {
7
    foreground: "#ffffff",
8
    background: "#222222"
9
  }
10
};
11
// 创建一个 Theme 的 Context
12
const ThemeContext = React.createContext(themes.light);
13
function App() {
14
  // 整个应用使用 ThemeContext.Provider 作为根组件
15
  return (
16
    // 使用 themes.dark 作为当前 Context
17
    <ThemeContext.Provider value={themes.dark}>
18
      <Toolbar />
19
    </ThemeContext.Provider>
20
  );
21
}
22

23
// 在 Toolbar 组件中使用一个会使用 Theme 的 Button
24
function Toolbar(props) {
25
  return (
26
    <div>
27
      <ThemedButton />
28
    </div>
29
  );
30
}
31

32
// 在 Theme Button 中使用 useContext 来获取当前的主题
33
function ThemedButton() {
34
  const theme = useContext(ThemeContext);
35
  return (
36
    <button style={{
37
      background: theme.background,
38
      color: theme.foreground
39
    }}>
40
      I am styled by theme context!
41
    </button>
42
  );
43
}

1
//...
2
function App() {
3
  const [theme, setTheme] = useState('light');
4
  const changeTheme = useCallback(() => {
5
    console.log('changeTheme');
6
    setTheme((prevTheme) => (
7
      prevTheme === 'light' ? 'dark' : 'light'
8
    ));
9
  }, []);
10
  // 整个应用使用 ThemeContext.Provider 作为根组件
11
  return (
12
    // 使用 themes.dark 作为当前 Context
13
    <ThemeContext.Provider value={themes[theme]}>
14
      <Toolbar changeTheme={changeTheme}/>
15
    </ThemeContext.Provider>
16
  );
17
}
18

19
// 在 Toolbar 组件中使用一个会使用 Theme 的 Button
20
function Toolbar(props) {
21
  return (
22
    <div>
23
      <ThemedButton changeTheme={props.changeTheme}/>
24
    </div>
25
  );
26
}
27

28
// 在 Theme Button 中使用 useContext 来获取当前的主题
29
function ThemedButton(props) {
30
  const theme = useContext(ThemeContext);
31
  return (
32
    <button
33
    onClick={props.changeTheme}
34
    style={{
35
      background: theme.background,
36
      color: theme.foreground
37
    }}>
38
      I am styled by theme context!
39
    </button>
40
  );
41
}

总结#

执行顺序如下

1
组件渲染开始
2
↓
3
执行 useContext (读取Context值，可能触发重新渲染)
4
↓
5
执行 useState/useReducer (可能触发状态更新)
6
↓
7
执行 useRef (创建/获取可变引用)
8
↓
9
执行 useMemo (可能执行计算逻辑)
10
↓
11
执行 useCallback (创建函数引用)
12
↓
13
渲染 JSX
14
↓
15
组件渲染完成
16
↓
17
执行 useLayoutEffect (同步副作用，DOM变更前)
18
↓
19
执行 useEffect (异步副作用，DOM变更后)

Hooks是如何诞生的？#

根据上述我们可以意识到，如果想让函数式组件用起来，那就要解决函数式组件没有状态的问题，也就是要给函数式组件加上状态。

函数和对象是不一样的，实例对象可以在多次渲染时保存状态，而函数则需要额外的空间去保存状态。

对应的就是函数需要有一个机制，将状态绑定到函数执行，当数据变化时，函数自动执行。这样任何影响UI的状态，都可以通过这个机制绑定到React的函数式组件上，并且在修改状态时，执行函数从而重新渲染组件。

在React中，这个机制就是Hooks。

Hook就是钩子的意思

什么是钩子？钩子的工作方式类似：

1. 建立连接
   • 你将代码”钩”到某个数据源或事件源上
   • 这就像把鱼钩放入水中，等待鱼的到来
2. 自动响应
   • 当数据变化或事件发生时，钩子会自动触发
   • 就像鱼咬钩时，你会感知到并拉竿
3. 无需持续监控
   • 你不需要不断检查数据是否变化
   • 系统会在合适的时机通知你，就像鱼咬钩时鱼线会动

对于函数式组件如下图

Execution，例如就是函数式组件本身，State、URL就类似于被绑定(钩住)的状态，当被钩住的状态发生变化时，就会重新执行函数，产生更新后的结果

还有一点需要注意，Hooks 中被钩的对象，不仅可以是某个独立的数据源，也可以是另一个 Hook 执行的结果，这就带来了 Hooks 的最大好处：逻辑的复用。

Hooks最大的好处：逻辑复用#

在之前的React中最让人诟病的就是逻辑复用，必须要借助高阶组件或是Render Props模式。但这两种方式都会产生冗余的节点，不便于调试和维护，而通过Hooks就可以很好的解决逻辑复用的问题。

举个例子，比如要实现一个根据不同窗口大小，展示不同组件的功能，需要逻辑可以复用的情况下，分别用高阶组件和Render Props实现的话如下

高阶组件

1
const withWindowSize = Component => {
2
  // 产生一个高阶组件 WrappedComponent，只包含监听窗口大小的逻辑
3
  class WrappedComponent extends React.PureComponent {
4
    constructor(props) {
5
      super(props);
6
      this.state = {
7
        size: this.getSize()
8
      };
9
    }
10
    componentDidMount() {
11
      window.addEventListener("resize", this.handleResize);
12
    }
13
    componentWillUnmount() {
14
      window.removeEventListener("resize", this.handleResize);
15
    }
16
    getSize() {
17
      return window.innerWidth > 1000 ? "large" ："small";
18
    }
19
    handleResize = ()=> {
20
      const currentSize = this.getSize();
21
      this.setState({
22
        size: this.getSize()
23
      });
24
    }
25
    render() {
26
      // 将窗口大小传递给真正的业务逻辑组件
27
      return <Component size={this.state.size} />;
28
    }
29
  }
30
  return WrappedComponent;
31
};

Render Props模式

1
 // 一个提供窗口大小的 Render Prop 组件
2
 class WindowSizeProvider extends React.Component {
3
   constructor(props) {
4
     super(props);
5
     this.state = { size: this.getSize() };
6
   }
7
   componentDidMount() { /* ...监听逻辑... */ }
8
   componentWillUnmount() { /* ...移除监听... */ }
9
   getSize() { /* ...获取大小... */ }
10
   handleResize = () => { /* ...更新state... */ }
11

12
   render() {
13
     // 调用 render prop，并将 state 作为参数传递
14
     return this.props.render(this.state);
15
   }
16
 }
17

18
 // 使用 Render Prop 组件
19
 class MyComponent extends React.Component {
20
   render() {
21
     return (
22
       <WindowSizeProvider
23
         render={({ size }) => { // 接收 size
24
           if (size === "small") return <SmallComponent />;
25
           else return <LargeComponent />;
26
         }}
27
       />
28
     );
29
   }
30
 }

可以看到以上两种方式都是套了一层组件壳子。

再来看看Hooks是怎么实现的

1
const getSize = () => {
2
  return window.innerWidth > 1000 ? "large" : "small";
3
}
4
const useWindowSize = () => {
5
  const [size, setSize] = useState(getSize());
6
  useEffect(() => {
7
  const handler = () => {
8
      setSize(getSize())
9
    };
10
    window.addEventListener('resize', handler);
11
    return () => {
12
      window.removeEventListener('resize', handler);
13
    };
14
  }, []);
15

16
  return size;
17
};
18

19
const Demo = () => {
20
  const size = useWindowSize();
21
  if (size === "small") return <SmallComponent />;
22
  else return <LargeComponent />;
23
};

函数式组件通过useEffect将类组件的生命周期的代码聚合到了一个统一的副作用函数中了。

与之前展示的老方案相比，这个使用 Hooks 的实现有以下优势：

• 更简洁：代码量明显减少
• 更直观：逻辑流程更加清晰，没有嵌套的组件层级
• 更灵活：可以在任何函数组件中使用，不需要包装整个组件
• 避免了 props 透传：不需要通过 props 层层传递数据

展示了为什么 React Hooks 在推出后迅速成为管理组件状态和副作用的首选方式。

Hooks的另一大好处：有助于关注分离#

Hooks能让针对同一个业务逻辑的代码尽可能的聚合在一块，这样的好处就是关注点分离。

比如上面例子中，Class组件需要将同一个业务逻辑的代码分离在各个生命周期方法中，但是通过Hooks的方式可以把业务代码聚合在一起。

比如在绑定和解绑事件需要在componentDidMount、componentWillUnmount中去写，而Hooks可以把这两个逻辑写在一起。

React社区的一张图可以详细展示这之间的区别

这和Vue3的设计思路也是相同的，Vue2⇒Vue3从上窜下跳写法变成了Composition API写法，目的也是将业务逻辑聚合起来。

总结#

Hooks更好的体现了React在State ⇒ View的函数映射开发思想。

Hooks解决了Class组件的代码冗余，逻辑复用复杂的问题。

吐槽： 相较于React的极致向后兼容，Vue确实变化的大了点… React像是稳健派，Vue是激进的改革派 从函数式编程和逻辑复用的角度来看，Vue3并不像React做的那么彻底。比如Vue3虽然有watchEffect，但是watchEffect不能像useEffect那样在卸载时清理副作用函数，也就是没法像React那样完全彻底的聚合业务逻辑并且替代生命周期，Vue3的生命周期依然存在感很强。 从思考角度上来说，React更关注对依赖数据的副作用处理，而Vue3更关注响应式数据变化引发的副作用处理。

对于React，更函数式，优势是

• 副作用与生命周期解耦，useEffect不绑定具体生命周期阶段，而是基于依赖项变化自动执行。
• 逻辑聚合能力强，多个相关逻辑可以集中在一个useEffect或自定义 Hook 中，而不是分散在多个生命周期中。

对于Vue3，更响应式，优势是

• 响应式系统自动追踪依赖，不需要像React写出[deps]依赖数组，只要改变了响应式变量，就会自动重新运行副作用。
• 生命周期还存在，直观容易调试。
• 性能优化更容易：Vue本身会自动做性能优化，不用像React需要通过React.memo,useCallback,useMemo手动优化。

React的基本概念#

基本概念就三个：

• 组件
• 状态
• JSX

1
function CommentBox() {
2
  return (
3
    <div>
4
      <CommentHeader />
5
      <CommentList />
6
      <CommentForm />
7
    </div>
8
  );
9
}

1
import React from "react";
2

3
export default function Counter() {
4
  const [count, setCount] = React.useState(0);
5
  return (
6
    <div>
7
      <button onClick={() => setCount(count + 1)}>{count}</button>
8
    </div>
9
  );
10
}

1
import React from "react";
2

3
function CountLabel({ count }) {
4
  // 子组件用于显示颜色
5
  const color = count > 10 ? "red" : "blue";
6
  return <span style={{ color }}>{count}</span>;
7
}
8

9
export default function Counter() {
10
  // 定义了 count 这个 state
11
  const [count, setCount] = React.useState(0);
12

13
  return (
14
    <div>
15
      <button onClick={() => setCount(count + 1)}>
16
        <CountLabel count={count} />
17
      </button>
18
    </div>
19
  );
20
}

JSX语法本质#

1
import React from "react";
2

3
function CountLabel({ count }) {
4
  // 子组件用于显示颜色
5
  const color = count > 10 ? "red" : "blue";
6
  return <span style={{ color }}>{count}</span>;
7
}
8

9
export default function Counter() {
10
  // 定义了 count 这个 state
11
  const [count, setCount] = React.useState(0);
12

13
  return (
14
    <div>
15
      <button onClick={() => setCount(count + 1)}>
16
        <CountLabel count={count} />
17
      </button>
18
    </div>
19
  );
20
}

1
React.createElement(
2
  "div",
3
  null,
4
  React.createElement(
5
    "button",
6
    { onClick: function onClick() {
7
        return setCount(count + 1);
8
      } },
9
    React.createElement(CountLabel, { count: count })
10
  )
11
);

金融#

• 《穷爸爸富爸爸》
• 《半小时漫画经济学》
• 《股票作手回忆录》

Properties 与 Element#

在 V8 内部，为了有效地提升存储和访问这两种属性的性能，分别使用了两个线性数据结构Properties、Element来分别保存排序属性和常规属性

1
// 可索引属性会被存储到 Elements 指针指向的区域
2
{ 1: "a", 2: "b" }
3

4
// 命名属性会被存储到 Properties 指针指向的区域
5
{ "first": 1, "second": 2 }

这是为了满足 ECMA 规范 要求所进行的设计。按照规范中的描述，可索引的属性应该按照索引值大小升序排列，而命名属性根据创建的顺序升序排列。

1
var a = { 1: "a", 2: "b", "first": 1, 3: "c", "second": 2 }
2

3
var b = { "second": 2, 1: "a", 3: "c", 2: "b", "first": 1 }
4

5
console.log(a)
6
// { 1: "a", 2: "b", 3: "c", first: 1, second: 2 }
7

8
console.log(b)
9
// { 1: "a", 2: "b", 3: "c", second: 2, first: 1 }

可以发现b的对象顺序和声明的不太一样。

可以看到索引属性【integer-indexed】(如1，2)按照升序排列。

而命名属性【named properties】(如first，second)则是按照声明顺序排列。

在同时使用索引属性和命名属性时可以看到两者发生了分隔。

将属性分解成这两种线性数据结构之后，如果执行索引操作，那么 V8 会先从 elements 属性中按照顺序读取所有的元素，然后再在 properties 属性中读取所有的元素，这样就完成一次索引操作。

命名属性的不同存储方式#

通过上述，我们知道V8将不同属性保存在elements属性和properties属性中，这样简化了程序复杂度，但是查找元素时却多了一步操作，比如bar.B，V8会先找出properties属性所指向对象，然后在properties对象上查找B属性，这种方式增加一步操作，就会影响到元素的查找效率。

基于这个原因，V8使用一种权衡策略用以提高查找属性效率。这个策略就是将部分常规属性存储到对象本身，这种称为对象内属性(in-object-properties)

V8 中命名属性有三种的不同存储方式：对象内属性（in-object）、快属性（fast）和慢属性（slow）。

用例子来说明对象内属性、快属性和慢属性

1
function foo() {}
2

3
let a = new foo()
4
let b = new foo()
5
let c = new foo()
6

7
for(let i = 0; i<10; i++){
8
  a[new Array(i+2).join('a')] = 'aaa'
9
}
10
for(let i = 0; i<12; i++){
11
  b[new Array(i+2).join('b')] = 'bbb'
12
}
13
for(let i = 0; i<30; i++){
14
  c[new Array(i+2).join('c')] = 'ccc'
15
}

a、b、c 三个对象分别有10、12、30个属性，分别会以对象内属性，对象内属性+快属性、对象内属性+慢属性这三种方式存储。

通过控制台执行上述脚本，在控制台的Memory内存处，获取内存快照，并在筛选框搜索foo。

a - 对象内属性

b - 对象内属性+快属性

c - 对象内属性+慢属性

结论与启示#

• 属性分为命名属性和可索引属性，命名属性存放在 Properties 中，可索引属性存放在 Elements 中。
• 命名属性有三种不同的存储方式：对象内属性、快属性和慢属性，前两者通过线性查找进行访问，慢属性通过哈希存储的方式进行访问。

什么是V8#

V8是一个由 Google 开发的开源 JavaScript 引擎，目前用在 Chrome 浏览器和 Node.js 中，其核心功能是执行易于人类理解的 JavaScript 代码。

V8是如何执行JavaScript代码的#

核心步骤分为编译和执行两步，首先需要将JavaScript代码转换为低级中间代码或者机器能理解的机器码，执行转换后的代码并输出结果。

可以将V8看成是一个虚拟机，通过模拟计算机的各种功能来实现代码的执行，比如模拟计算机的CPU、堆栈、寄存器等。虚拟机还具有它自己的一套指令系统。

高级代码为什么需要先编译后执行？#

CPU只能执行机器码，CPU可以被认为是一个非常小的运算机器，我们可以给机器发送1000100111011000的二进制指令。当执行到这条指令时，就会执行一个操作。

为了完成复杂任务，CPU存在一大堆指令，这一大堆指令就叫做指令集。指令集都是二进制代码，对于CPU来说它可以认识，但是对于程序员来说二进制难以阅读和记忆，于是在指令集基础上，有了会变指令集。可以参考如下

1
1000100111011000 机器指令
2
mov ax,bx 汇编指令

但是CPU并不能直接识别汇编语言，需要一个翻译官(汇编编译器)将汇编语言翻译为机器可以识别的二进制

虽然汇编已经将二进制代码进行了一次抽象，但是想要实现一个功能还需要大量汇编语言。

由于不同的CPU有不同的指令集，要使用机器语言或者汇编语言实现一个功能，需要在每种CPU下编写特定的汇编代码。

而且在编写汇编代码时，还需要了解和处理器、架构相关的硬件知识，比如需要操作寄存器、内存、操作CPU等。大部分程序员在编写应用时指向专心处理业务逻辑，不想过多理会处理器架构相关细节。

因此高级语言应运而生了。如C、C++、Java、C#、Python、JavaScript 等。可以适应不同CPU架构的语言，屏蔽了计算机架构细节，可以专心处理业务逻辑。

与汇编语言一样，处理器无法识别高级语言编写的代码，通常有两种方式来执行这些代码。

第一种是解释执行，需要先将输入的源代码通过解析器编译成中间代码，之后直接使用解释器解释执行中间代码，然后直接输出结果。

第二种是编译执行。采用这种方式时，也需要先将源代码转换为中间代码，然后我们的编译器再将中间代码编译成机器代码。通常编译成的机器代码是以二进制文件形式存储的，需要执行这段程序的时候直接执行二进制文件就可以了。还可以使用虚拟机将编译后的机器代码保存在内存中，然后直接执行内存中的二进制代码。

以上是计算机执行高级语言的两种基本的方式：解释执行和编译执行。但是不同语言，这个过程会有差异。

比如要执行 C 语言编写的代码，你需要将其编译为二进制代码的文件，然后再直接执行二进制代码。而对于像 Java 语言、JavaScript 语言等，则需要不同虚拟机，模拟计算机的这个编译执行流程。执行 Java 语言，需要经过 Java 虚拟机的转换，执行 JavaScript 需要经过 JavaScript 虚拟机的转换。

而对于JavaScript而言，虚拟机也是多个的，苹果用的JavaScriptCore，Firefox 使用了 TraceMonkey 虚拟机，而 Chrome 则使用了 V8 虚拟机。

V8是如何执行JavaScript代码的？#

V8作为JavaScript虚拟机的一种，是如何执行JavaScript的呢？ V8并没有采用解释或编译的其中一种手段，而是将两者混合起来，被称为JIT(Just In Time)技术。

这是一种权衡策略，解释和编译各有优缺点，解释启动快，但执行慢。编译启动慢，但是执行快。下面是V8执行JavaScript的流程图。

可以看左图部分，在V8启动执行JavaScript之前，它需要准备一些基础环境，这些基础环境包括了堆空间、栈空间、全局执行上下文、全局作用域、消息循环系统、内置函数等。比如：

• JavaScript全局上下文包含了执行过程中全局信息，比如一些内置函数，全局变量等信息。
• 执行过程中的数据都需要存放在内存中，全局作用域包含一些全局变量。
• V8用的是堆和栈的内存管理模式，因此V8需要初始化内存中的堆和栈结构。
• 还需要初始化消息循环系统，这是让V8系统动起来的关键，消息循环系统包含消息驱动器和消息队列，就像V8的大脑，不断接受消息并决策如何处理消息(比如请求、setTimeout、事件之类的)

在基础环境准备好后，V8就可以开始执行JavaScript代码了。

首先V8会接收到需要执行的JavaScript源码，但是对于V8而言这些代码只是一堆字符串，想要理解这些字符串就需要结构化这段字符串，通过分析(词法分析(tokenize)->语法分析(parse))分解为AST。AST是V8可以理解的结构。

生成AST的同时，V8还会生成相关作用域(执行上下文)，在作用域中存放相关变量。

在有AST和作用域后，解释器就可以生成字节码了，字节码是介于AST和机器代码的中间代码。

解释器可以直接逐行解释执行字节码，或者编译器将其编译为二进制的机器码执行。

在解释器下面有个机器人，这是用于监控解释器执行状态的模块，在解释器执行字节码时，如果发现某段代码被多次重复执行，这段代码就会被标记为热点代码。

当某段代码被标记为热点代码后，V8就会将这段字节码丢给编译器，编译器会将这段字节码编译为二进制代码，同时对编译后的二进制代码进行优化操作，使得这段二进制机器码执行效率大幅提升。如果再执行到这段热点代码时，V8会优先执行优化后的二进制机器码，这样整体的执行效率就会大幅提升。

什么是隐藏类？#

V8中的隐藏类 V8会给每一个对象都分配一个隐藏类(Hidden Classes)， 用于描述对象的形状。

intelligent design: 推断代码背后的思想(不知道你会怎么写，先假设，然后根据你的写法再去做优化)

为什么要有隐藏类？

对于C++这类静态类型语言，变量类型在定义时就决定了。

1
int x = 5 ;

C++编译器通过一条指令就可以知道变量x的类型和内存位置。

但由于JavaScript并不是预编译的，因此在JavaScript中相同的操作，每次执行程序时，引擎都必须检查它是整数还是浮点数，或者任何其他有效的数据类型。所以JavaScript中的每条指令都要经过几次类型检查和转换，这会影响到它的执行速度。

隐藏类在概念上类似于典型的面向对象编程语言中的类。但这个类并不是提前预知或定义的，而是在创建对象时即时创建隐藏类，并根据对象的变化而动态更新。隐藏类用于标识对象特征，也对 V8 编译器的优化和内联缓存起到非常重要的作用。

什么是内联缓存#

在V8执行函数时，会观察函数中一些调用点 (CallSite) 上的关键的中间数据(如上文所说，可以认为是一种记忆)，当下次再执行时，V8可以利用这些中间数据，有效提升入参为相同隐藏类(的对象)的函数重复执行的执行效率。

分析流程如下

IC会为每个函数维护一个反馈向量(FeedBack Vector)，可以认为每个函数对应了一张表如下

每张表由很多项构成，每一项成为一个插槽(Slot)。V8会将loadX的中间数据写入反馈向量中的插槽里。

1
function loadX(o) {
2
   o.y = 4
3
   return o.x
4
 }

V8执行这段函数时，会认为o.y = 4 及 o.x为调用点(CallSite)，因为他们调用了对象及属性，这时V8就会在loadX函数的反馈向量里给每个调用点分配一个插槽。

每个插槽中包含了插槽索引、类型、状态及隐藏类地址(map)、以及属性的偏移量。比如上面两个函数中都使用了对象o，那么这两个插槽的map指向的是同一个隐藏类，地址是相同的。

让我们来通过字节码来分析在V8执行loadX函数时，是如何将关键数据写入到反馈向量中的。

loadX的代码如下所示

1
function loadX(o) {
2
    return o.x
3
}
4
loadX({x:1})

通过d8命令d8 --print-bytecode <js文件>

可以看到上述代码转换成的字节码，如下

1
GetNamedProperty a0, [0], [0]
2
Return

他的具体含义是

• GetNamedProperty，取出参数a0中第一个属性值，并将属性值放到累加器中。a0后第一个[0]代表取参数的第一个属性值，第二个[0]就和反馈向量相关了，代表将操作的中间数据插入反馈向量的第一个插槽里。
• Return 返回累加器中的属性值。

累加器：一个非常特殊的寄存器，用于保存中间结果。

观察上图会发现：

• map一栏缓存的是o对象的隐藏类地址
• type代表当前的操作类型，o.x这种访问对象属性的操作被称为LOAD。
• state代表当前是单态(monomorphic)
• offset缓存了属性x的偏移量

V8除了缓存o.x这种LOAD类型操作之外，还会缓存存储类型(STORE)和函数调用(CALL)类型的中间数据。

以下面的代码为例

1
function foo(){}
2
function loadX(o) {
3
    o.y = 4
4
    foo()
5
    return o.x
6
}
7
loadX({x:1,y:4})

将上述代码转换为字节码

1
LdaSmi [4]
2
SetNamedProperty a0, [0], [0]
3
LdaGlobal [1], [2]
4
Star0
5
CallUndefinedReceiver0 r0, [4]
6
GetNamedProperty a0, [2], [6]
7
Return

1. 首先是

1
LdaSmi [4]
2
SetNamedProperty a0, [0], [0]

具体是将常数4加载到累加器中，然后通过SetNamedProperty将累加器中的4赋给o.y，这是一个存储(STORE)类型操作，将中间数据写入反馈向量的第1个插槽中。

1. 执行foo

1
LdaGlobal [1], [2]
2
Star0
3
CallUndefinedReceiver0 r0, [4]

加载foo函数对象的地址到累加器中，这是通过LdaGlobal来完成的，然后V8将中间结果存放到反馈向量的第3个插槽，这是一个存储操作。

执行 CallUndefinedReceiver0调用foo函数，并将调用过程数据写入反馈向量的第5个插槽中，这是一个调用(CALL)类型操作。

1. 查询o.x

1
GetNamedProperty a0, [2], [6]
2
Return

从a0参数中拿出第二个属性，并将中间数据写入反馈向量的第6个插槽中，这是一个加载(LOAD)类型操作。

说了这么多，它记录的实际意义是什么呢？

就是再loadX再次被执行，且入参的对象隐藏类与此前执行过的对象隐藏类相同时，在执行到return o.x 时，可以直接去反馈向量中根据偏移量直接查找到x属性所在位置，这样就可以大大提高V8的执行效率。

多态和超态#

在之前的案例中，我们说到相同对象形状同时有相同隐藏类的条件下，重复执行会降低查找效率。

但是如果是多种对象呢，V8会怎么处理这种情况。

1
function loadX(o) {
2
    return o.x
3
}
4
var o = { x: 1,y:3}
5
var o1 = { x: 3, y:6,z:4}
6
for (var i = 0; i < 10000; i++) {
7
    loadX(o)
8
    loadX(o1)
9
}

可以看到o和o1形状是完全不同的。

当第一次执行loadX时，v8会将o的隐藏类记录在插槽中。但当第二次执行时，入参是o1，通过与插槽中隐藏类的比对发现并不是相同的隐藏类，此时V8就无法使用反馈向量中记录的偏移量信息了。

对于这种情况，V8会将新的隐藏类也记录在反馈向量中，同时记录属性的偏移量，反馈向量此时第一个槽中就包含了两个隐藏类及偏移量。如下图所示

当再次执行loadX中的o.x语句时，同样会查找反馈向量表，会发现第一个槽中记录了两个隐藏类。这时V8需要拿这个新的隐藏类和第一个插槽中的两个隐藏类来挨个比较，若相同，就用对应的偏移量，若不同则将新的隐藏类和偏移量添加到反馈向量的第一个插槽中。

若一个插槽中只包含1个隐藏类，这种状态叫单态。

若一个插槽中包含了2~4个隐藏类，这种状态叫多态。

若一个插槽中超过了4个隐藏类，这种状态叫超态。

若一个函数一直是单态的，其执行效率一定是最好的。如果是多态的情况，V8会用线性结构存储，可以挨个查找。若是超态的情况，则V8会采用hash表的结构存储。

总结#

IC的本质就是让每个函数都有记忆，当第一次执行函数时，会将函数中的存储、加载、调用相关的中间结果保存到反馈向量中。当再次执行时，V8就会去反馈向量中查询相关中间信息，如果命中了，就可以直接利用。

单态的性能优于多态和超态。当你在写一个loadX(o)的函数时，尽量不要使用多个不同隐藏类的o对象。

单态不仅仅只应用于此处，对于JavaScript这门动态语言而言，引擎想要做优化，能准确推断数据结构非常重要，比如函数入参一直是字符串，那就会去调用内置方法中处理字符串的部分，次数多了就会转换为机器码。如果一会是字符串一会是数字，就会触发反优化，耗费性能。

中序遍历 左根右#

递归

1
var inorderTraversal = function(root) {
2
  const res = []
3
  const dfs = (root) => {
4
    if(root === null) return
5
    dfs(root.left)
6
    res.push(root.val)
7
    dfs(root.right)
8
  }
9
  dfs(root)
10
  return res
11
};

后序遍历 左右根#

递归

1
var postorderTraversal = function(root) {
2
  const res = []
3
  const dfs = (root) => {
4
    if(root === null) return
5
    dfs(root.left)
6
    dfs(root.right)
7
    res.push(root.val)
8
  }
9
  dfs(root)
10
  return res
11
};

深度优先遍历(DFS)#

1. 访问根节点。
2. 对根节点的children挨个进行深度优先遍历。

递归

1
const dfs = (root) => {
2
  if(root === null) return
3
  root.children.forEach(leaf => {
4
    console.log(leaf.val)
5
    dfs(leaf)
6
  })
7
}

栈

1
const dfs = (root) => {
2
  if(root === null) return
3
  const stack = [root]
4
  while(stack.length > 0) {
5
    const node = stack.pop();
6
    console.log(node.val)
7
    node.children.forEach(leaf => {
8
      stack.push(leaf)
9
    })
10
  }
11
}

广度优先遍历(BFS)#

1. 新建一个队列，把根节点入队。

2. 遍历队列

   • 把队头出队并访问。

   • 把队头的children 挨个入队。

重复2，直到队列为空。

1
const bfs = (root) => {
2
    if (!root) return;
3

4
    const queue = [root];
5

6
    while (queue.length > 0) {
7
        const node = queue.shift();
8
        console.log(node.val);
9

10
        node.children.forEach(leaf => {
11
          queue.push(leaf);
12
        });
13
      }
14
    }
15
}

攻击方式#

1.自动发起Get请求

比如此时你处于登录状态, 然后你打开了一个恶意链接, 这个链接的页面有一张图片, 图片的src就是一个Get请求, 当你打开这个链接的时候, 就会自动加载图片的src, 同时也执行了这个Get请求

2.自动发起Post请求

当用户打开黑客的页面之后, 会自动提交POST请求

1
<html>
2
<body>
3
  <h1>黑客的站点：CSRF攻击演示</h1>
4
  <form>
5
    <input />
6
    <input />
7
  </form>
8
  <script> document.getElementById('hacker-form').submit(); </script>
9
</body>
10
</html>

3.引诱用户点击链接

除了Get和Post之外, 还有一种是引诱用户点击黑客站点的链接, 经常出现在论坛和恶意邮件中, 比如有一个美女图片

1
<div>
2
  <img width="150" src="http://images.xuejuzi.cn/1612/1_161230185104_1.jpg" />  </div> <div>
3
  <a href="https://time.geekbang.org/sendcoin?user=hacker&amp;number=100">
4
    点击下载美女照片
5
  </a>
6
</div>

以上就是CSRF攻击, 和XSS不同, CSRF不需要将恶意代码注入用户页面, 只是利用服务器漏洞和用户的登录状态来攻击.

如何预防#

首先了解如何才能发起CSRF攻击, 第一要找到服务器漏洞, 第二需要用户保持登录状态, 第三要打开第三方站点, 满足这些条件黑客就可以对用户进行CSRF攻击了

有这么几个途径来预防

1.利用Cookie的SameSite属性

黑客利用用户的登录态进行攻击, Cookie就是浏览器和服务器之间维护登录状态的一个关键数据, 通常CSRF攻击都是从第三方站点发起的, 可以通过服务端设置响应头上添加set-cookie的属性SameSite来解决, 这样再第三方站点发起请求时请求头就不会带着Cookie .

SameSite的目的就是限制第三方网站利用Cookie发起请求, 设置了三种值 Strict/Lax/None

2.验证请求的来源站点

在服务端验证请求来源的站点, 服务器可以通过HTTP的请求头里的Referer和Origin属性来判断是否是第三方站点, 如果判断是第三方站点就直接禁止

Referer是HTTP请求头中的一个字段, 记录了该HTTP请求的来源地址, Referer可以告诉服务器HTTP的请求来源, 但是有些场景不适合将来源URL暴露给服务器, 因此浏览器提供给开发者一个选项, 可以不用上传Referer值.标准委员会又指定了Origin属性, 和Referer不同的是不包含路径信息. 因为有些站点出于安全考虑不愿意暴露源站点的详细路径信息.

因此服务器的策略是优先判断Origin, 如果没有Origin , 再根据情况判断是否判断Referer值.

3.CSRF Token

token认证可以避免CSRF攻击 就是在浏览器向服务器发送请求的时候, 服务器生成一个Token, 其实就是服务器生成的一个字符串, 每次发起请求时Token需嵌入到请求参数或头中（如隐藏表单字段、AJAX请求头），服务端验证token是否合法, 如果是第三方站点发出的请求就无法获取到token的值所以会被服务器拒绝,

攻击方式#

• 恶意脚本可以通过document.cookies窃取用户的 Cookie 数据，并将其作为参数添加至恶意站点尾部发送到黑客服务器中

• 可以通过监听用户行为获取用户输入的信用卡信息并发送给恶意服务器, 用的是JavaScript中的addEventListener 监听用户的键盘事件

• 可以通过修改DOM制造假的登录窗口, 欺骗用户输入用户名和密码等信息.

• 可以页内生成浮窗广告, 影响用户体验

这就是XSS攻击, 为了解决XSS攻击, 浏览器引入了内容安全策略, 称为CSP, CSP的核心思想就是让服务器可以决定浏览器加载哪些资源, 让服务器决定浏览器是否执行内联JavaScript代码. 这样就可以大大减少XSS攻击

XSS攻击种类#

如何阻止XSS攻击#

1. 对于存储型和反射型可以在前端过滤关键字以及服务端对一些关键的字符进行转码

   ​ 比如对关键的字符进行转码, 比如把script标签包裹的内容全部替换成空, 这样就可以防止请求的时候携带脚本, 脚本也不会执行

2. 充分利用CSP

   在获取HTML时配置HTTP头Content-Security-Policy

   https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP

   1. 限制加载其他域下的资源文件这样即使插入了一个JavaScript脚本也不会被加载
   2. 禁止向第三方域提交数据, 这样用户数据不会泄漏
   3. 禁止执行内联脚本和未授权脚本
   4. 还有上报机制, 可以帮助发现有哪些XSS攻击, 便于修复

3. 使用HttpOnly属性

   ​ 很多XSS攻击都是盗用cookie, 因此可以通过服务器设置响应头中的set-cookie中的HttpOnly属性来保护cookie的安全, 使用HttpOnly的cookie在控制台中也是不一样的, 无法用JavaScript来读取, 比如document.cookie就无法读取到了

   

   ​