ALGORITHM

COMPUTATION

CRYPTOGRAPHY

FRONTEND

GAME-THEORY

INVESTMENT

JS&TS

LINUX

MATHEMATICS

NODE

PROJECT-PRACTICE

REACT

THOUGHTS

古文整理

文史哲艺


**I have a suggestion: When you are entangled in whether to use a certain technology, first check what level the technology solves and what problems, and then examine whether you need to solve such problems. Can save unnecessary entanglement.**

So what problem does WebSocket solve? The session management in the traditional HTTP protocol is not perfect. The client must actively initiate a Request request before the server can deliver messages to the client.

If the client submits a time-consuming task to the server, how does the server send a message to the client after it is done? In other words, in some scenarios, the server must ensure that the client is online. The solution is AJAX polling or alive detection. The client sets a timer, and every once in a while the client will initiate an AJAX request to the server, asking whether the server has completed the task, or actively telling the server "I am still online", so as to obtain the data returned by the server in time.

AJAX polling is still useful if there are fewer clients and the server performance is strong enough, but if there are more clients, what if the server has to accept requests from tens of thousands of clients? Not to mention taking up bandwidth, can the server withstand these pressures? If the real-time requirements are high, it means that resources are updated frequently and the amount of data transmitted is large, such as games and web conferences, and the method of conveying messages through AJAX polling cannot be used.

**WebSocket solves the two problems mentioned above: it makes up for the defect that the server cannot actively contact the client, and jointly solves the pressure brought by the traditional one-way communication on the server. Another is to solve the problem of real-time communication**

The client and the server only need to complete a handshake, and a persistent connection can be created directly between the two, and two-way data transmission can be performed. In this way, even if there is no explicit request from the client, the server can send information to the client, realizing reverse communication.

Although WebSocket also has a certain performance consumption, it is still very cost-effective compared to the consumption of large-scale AJAX polling.

If your business scenario needs to solve the above two problems, then it is recommended to use it, otherwise it is unnecessary, depending on your understanding of the business.


Should Put All Requests in a Websocket Connection?


## React.memo

React.memo is a **component level** cache API in React, which can temporarily store rendered components, and when necessary, decide whether to update the rendering or obtain it directly from the cache to avoid unnecessary component rendering.

And its' usage:

```javascript
const MyMemoedComponent = React.memo(
  function MyComponent(props) {
    /* render with props */
  },
  function compare(prevProps, currentProps) {
    /* logics for comparing the prevProps and nextProps */
  },
);
```

It returns a Memorized function component.

When used, it accepts two parameters: the first is the target component, which is the definition of the component that needs to be optimized.
The second is the comparison function `compare`, which receives the currentProps passed in for each round of rendering and the prevProps passed in for the last rendering.

However, due to the immutable feature in the React function component, the component will be rendered according to its Props. However, when the same or equivalent Props are used multiple times during rendering, performance will be wasted.

Users can write their own logic to determine whether the two incoming props are logically equivalent. The `compare` function is expected to return a boolean value. If it returns `true`, it means that the props passed in twice are equivalent. Then during the current round of rendering, the last component will be directly taken out of the cache without re-rendering the component.

For example, when it is necessary to render a personal resume information, if the personal information on the resume remains unchanged, then there is no need to re-render. Can be used like this:

```javascript
const MyMemoedProfile = React.memo(
  function Profile({ name, sex, age, job }) {
    return (
      <div>
        <h2>{`Your Name: ${name}`}</h2>
        <ul>
          <li>{`sex: ${sex}`}</li>
          <li>{`age: ${age}`}</li>
          <li>{`job: ${job}`}</li>
        </ul>
      </div>
    );
  },
  function compare(prevProps, currentProps) {
    return (
      prevProps.name === currentProps.name &&
      prevProps.sex === currentProps.sex &&
      prevProps.age === currentProps.age &&
      prevProps.job === currentProps.job
    );
  },
);
```

## useMemo

The `React.memo` mentioned above is the optimization of the component level, **then useMemo is the optimization of the internal calculation logic of the component.**

JavaScript is not suitable for intensive calculations. But if we have calculation-intensive logic inside the component, every time the component is rendered, the calculation must be done again, which is also unacceptable for performance. Therefore, useMemo can temporarily store the intensive calculation results of each time, and then decide whether to repeat the calculation according to the judgment.

The specific usage is as follows:

```javascript
const memoizedValue = useMemo(() => doSomeComputeExpensiveWork(a, b, ...), [a, b, ...]);
```

Unlike React.memo, its first parameter is a function that returns a computationally intensive function. It accepts dependencies instead of comparison functions as its second argument. Dependencies will be compared (shallow comparison here) every time a value is fetched. If the dependencies are the same, the last rendering result will be reused instead of recalculated. If the dependencies are different, call the computationally intensive function returned by the first argument.

For example, we want to design a component that displays the Fibonacci sequence: input the number of items `n`, and return the Fibonacci number of the `n`th item.

```javascript
function FibonacciNumber({ n }) {
  const target_value = useMemo(
    () =>
      function calc(n) {
        let arr = [];
        if (n < 1) return arr;
        let one = 1,
          two = 0,
          three = 0;
        for (let i = 1; i <= n; i++) {
          three = one + two;
          arr.push(three);
          one = two;
          two = three;
        }
        return arr;
      },
    [n],
  );
  return <div>{`The ${n} th's fibonacci number is : ${target_value}`}</div>;
}
```

In this way, no matter how many rounds the component renders, as long as the dependency `n` remains unchanged, the previously calculated Fibonacci numbers will be obtained from the cache instead of recalculated. If a new `n` is obtained, the `calc` function returned by the first parameter will be used again to calculate the new value with `n` as the parameter.

If the dependency is empty, the data is always fetched from the cache.

## useCallback

useMemo has a problem: the function in the first argument must return a computationally intensive function. If the first parameter is directly set to a calculation-intensive function, it will be simplified a lot, as long as the calculation-intensive function does not need to be changed.

useCallback can be regarded as the equivalent grammatical sugar of useMemo, and there is the following conversion relationship between them:

`useCallback(fn, deps)` is equivalent to `useMemo(() => fn, deps)`.

Like useMemo, if the dependency is empty, the data is always fetched from the cache.

## useEvent

Try the following code:

```javascript
const MyComponent = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    console.log(counter);
    setCounter((counter) => counter + 1);
  };

  return <div onClick={handleClick}>click to add counter counter: {counter}</div>;
};
```

There seems to be no problem with this component, but if you think about it carefully, a new `handlerClick` event function will be recreated every time it is rendered and then passed to the button. So if the component is rendered many times, the handlers established in history will accumulate more and more.

In order to solve this problem, we put a layer of useCallback to cache the event forever, and always get data from the cache in each round of rendering:

```javascript
const MyComponent = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = useCallback(() => {
    console.log(counter);
    setCounter((counter) => counter + 1);
  }, []);

  return <div onClick={handleClick}>click to add counter counter: {counter}</div>;
};
```

But this triggers React's closure trap. The `counter` in the function in the first parameter is always the value when the component is first created, that is `0`.

So useEvent solves the problem:

```javascript
const MyComponent = () => {
  const [counter, setCounter] = useState(0);

  const handleClick = useEvent(() => {
    console.log(counter);
    setCounter((counter) => counter + 1);
  });

  return <div onClick={handleClick}>click to add counter counter: {counter}</div>;
};
```

But it is still an experimental feature today and not recommended for production use.


Optimization Scheme for React Component Rendering


## 中国传统中没有民主观念

**《财经》：** 今年（编者按，2014 年）是孔子诞辰 2565 周年，随着各种纪念活动的展开，对于传统文化的关注也达到了新高潮。我注意到，许多人士的文章或演讲里都提到文化传统“创造性转化”。这个词是您在上世纪 70 年代初期最早提出的，那么，究竟什么是文化传统的“创造性转化”？

> **林毓生：** 文化传统的“创造性转化”乃是把一些中国文化传统中的符号、观念与价值加以重组或改造（有的传统成分加以重组，另外有的成分则需改造，当然也有成分应该扬弃），使经过重组或改造的符号、观念与价值变成有利于变迁的种子，同时在变迁的过程中继续保持了文化的认同。这里所说的重组或改造，当然是指传统中有的东西可以重组或改造、值得重组或改造，这种重组或改造可以受外国文化某些成分的影响，却不是硬把外国东西移植过来。

---

**《财经》：** 既然能够进行“创造性转化”，就意味着传统文化里是有合理性的因素。但是在一些人士看来，传统文化里缺乏现代性因素，很难为中国的现代化转型提供思想资源。例如，中国传统里就没有民主的观念。

> **林毓生：** 民主的观念最根本的意义是“主权在民”（popular sovereignty）——国家为人民所有，应由人民自治，中国传统中并没有这个观念。
>
> 民选的官员与这些官员指派的部属以及民意代表，在民主的观念与制度中都是人民的公仆，他们的政治行为需向人民负责，而民主的制度必须制定法律使他们不能不负责。民主的运作必须依据法律的程序。无可讳言，无论从思想层次而言或从运作层次而言，民主是从西方引进来的东西。

---

**《财经》：** 但是也有不少学者认为，孟子的“民为贵，社稷次之，君为轻”、“天视自我民视，天听自我民听”等论说表明，中国传统里是有民主的思想资源的。

> **林毓生：** “民为贵”可分广义与狭义二说：从其广义来看，那是看重人的价值；从其狭义来说，那是强调有道之君要为人民谋福祉，那是来自政治道德化的思维，即使表面上与民主观念中所包含的“民享”观念相通，但因来源不同，不可与民主观念相混淆。
>
> 民主观念所包含的“民享”，在理论上是政治运作的自然结果（实际情况当然要复杂得多）：国家主权属于人民，亦即民有；人民有权利，也被假定有能力自治，亦即民治；自治的措施一切为人民，亦即“民享”。所以，“民享”是民主的自然结果。**简明地说，“民享”就是人民自己为自己。儒家中“民为贵”的思想来源与这个“民享”观念的来源完全不同。**
>
> 孟子所谓“天视自我民视，天听自我民听”，指谓“天命”是由民意所显示，同时衍生出来人民有权利反叛暴君的观念（《孟子· 梁惠王下》：“齐宣王问曰：汤放桀，武王伐纣，有诸？孟子对曰：于传有之。曰：臣弑其君可乎？曰：贼仁者谓之贼，贼义者谓之残，残贼之人谓之一夫。闻诛一夫纣矣，未闻弑君也”）。
>
> 但这并不表示就是民主，因为“天命”虽由民意所显示，但并不传入人民手中：如果反叛失败了，天命仍然保留在原来的君王手中，如果反叛成功了，天命便传给下面一位“真命天予”的手中，人民的地位并无改变，仍然是需要君王统治的（在传统中国，由于社会关系主要是由“礼”来维系，所以权利观念并不是特别发达。不过，正如上引孟子的话所显示，反叛暴君、暴政的权利是清楚的）。
>
> 因此，儒家政治哲学的最高理想，归根究底仍是一元论的、政教合一的“圣王”观念。和“主权在民”相反，中国的传统观念是“普遍王权”。这种观念认为，人间的政治与社会秩序必须依靠秉承“天命”的君王才能获致，在这个观念的笼罩之下，中国传统中的思想家未曾想到国家的秩序可以来自人民的自治。事实上，中国在“普遍王权”未被怀疑之前，无法产生民主的观念。

---

**《财经》：** 奇怪的是，为什么近代以来每一代中国知识分子当中，都有人主张中国传统中原有民主的论调呢？

> **林毓生：** 这是建筑在模糊理解之上或是由于自卑心理在作祟——看见西方的好东西，就硬说我们自己也有，或者是为了政治利益所做的宣传工作。
>
> 正因为我们传统中并没有民主的观念与制度，所以我们在实行民主的时候，要特别小心，要提高警觉，千万不要被迷惑或玩弄。必须认清一点：因为我们传统中并无民主的观念与制度，所以在中国实行民主实在不是一件容易的事，虽然我们有了实行民主的要求而客观上也有许多有利的条件可以配合。
>
> 不过，话还得说回来，虽然我们传统中没有民主的观念与制度，但却有许多资源可以与民主的观念与制度“接枝”，仁的哲学就可以与平等观念“接枝”。前面我在答复你的访问时，也谈到一点儒家看重人的价值，尊重人的道德自主性时，与西方宪 ZHENG 民主所蕴含的对人的尊重之间可以彼此沟通、借鉴的。

---

## “使过去的原则变成现代化的种子”

**《财经》：** 法治目前是中国大陆的一个“热词”，不管是执政者还是普通民众，都认识到法治的重要性。但是，到底什么是法治？

> **林毓生：** “法治”二字指谓 the rule of law。法治是法律主治，与 the rule by law（依法治国）不同。人类各个民族都有多彩多姿的历史，其中都有大家均能欣赏的美好成分。然而，只有欧美文明 ─ 虽然也发展出来不少可怕、可鄙的成分 ─ 却在启蒙时代发展出来以“权力约束权力”的机制与深刻的政治思想。
>
> 正如孟德斯鸠所说：“一切有权力的人都容易滥用权力，这是万古不易的一个经验。有权力的人们使用权力一直到遇有界线的地方方才休止……从事物的性质来说，要防止滥用权力，就必须以权力约束权力”。“以权力约束权力”指的是：权力不再统合于一人或极少数几个人手中；政府的行政权、立法权、司法权分立之，彼此不能逾越而能相互制衡。**人类的历史经验告诉我们：只有实现法治的宪政民主制度，才有落实权力受到约束的希望。**
>
> 另外，实现法治的国家能够保障每个人在法律范围之内的个人自由。在讨论什么是法治之前，需先对法律与指令（commands）做一严格的区分。指令是为了完成发布指令的人（或组织）的特定目的而发布的。必须接受指令的人，根本没有机会遵从他自己的倾向。专制国家的指令，则常以法律的形式呈现（不过，在行之有年的宪 ZHENG 民主国家，临时出现了紧急状况时，政府有时也需要使用指令来解决紧急问题）。
>
> 法治中的法律，则有两个要件：
>
> - **（1）普遍性：** 它普遍地应用到社会上的每一个人，没有人可以例外。中国法家思想中也有所谓王子犯法与庶民同罪，表面看来似是“平等”的说法。然而，法家思想中的“法”，大多是这里所说的“指令”。它基本上，是为“家天下”的帝王的利益服务的，也与下面所要谈的法治中的法律 ─ 不为任何人或团体的具体目的服务的 ─ 抽象性要件不符，两者根本不同，不可混淆。
>
>   人间的法律，如果能够运作得平等，它增加了人们的行为在这个范围之内的信心、稳定性与灵活性。假若我守法的话，其他人也都守法的话，我在这个空间之内是相当自由的，我就不必太担心，假若有一个人要跟我捣乱，我怎么办？因为他要跟我捣乱的话，我知道法律就会对付他。
>
> - **（2）抽象性：** 法治之下的法律不为任何人或任何团体（包括政党）的具体目的服务。当我们遵守那些（在制定时并不考虑对特定的人适用问题的）普遍且抽象的规则时，我们并不是在服从其他人的意志，因而我们是自由的。
>
>   正是由于立法者并不知道其制定的规则将适用于什么特定的案件，也正是由于应用这些规则的法官，除了根据现行规则与受理案件的特定事实作出判决，别无其他选择。
>
>   尤有进者，必须加重语气强调的是：不是任何经过法律程序通过的法案就是合乎法治的法律。为什么呢？因为立法本身需要遵守合乎法治的基本原则，可称之为法治的“后设原则”（meta-legal principles）。这些“后设原则”指的是支持法治的道德价值及受其影响的政治观念，包括：人生而平等，人不可能十全十美（故其权力必须在制度上加以限制）等等。假若立法机构合乎程序通过的法案违背了法治原则的话，大法官会议可判其违宪。

---

**《财经》：** 与这种法治观念比起来，中国历史上法家主张的“法治”显然不是为了维护人权，而是为了“禁暴止乱”，维护统治者的利益。

> **林毓生：** 法家所谈的那一套主要是把法律当做政治统治的工具，与英美民主社会所依靠的“法律主治”的法治完全不同。以法治的观点去看法家所谓的法律，那些法律是违法的。以法律作为统治工具的法家思想，只能造成一个有效率的威权或极权国家。
>
> 中国历史上，对于帝王专制的批评很多。明末清初，左派王学和黄宗羲的思想都深切地感受到了帝王专制的痛苦，黄宗羲甚至说中国的“家天下”是“以我之大私为天下之大公”，但在实质层面他们并未突破传统政治思想的架构。

---

**《财经》：** 基本人权的理论在西方非常发达，而在中国传统里并没有这方面的思想。这恐怕也正是中国难以建立法治的一个重要原因吧？

> **林毓生：** 我们需要的法治必须以基本人权为其前提，而拥护基本人权思想正不必完全取自西方哲学的传统，不一定非要用西方理论为我们所需之基本人权做辩解，孔孟的“仁”的哲学也可作为基本人权的理论基础。前已述及，孟子所说人民有反叛暴君的权利，所以中国传统不是绝对没有基本人权的观念。
>
> “仁”的哲学的最基本原则，就是肯定人的道德资质是与生俱来的；而用内省的工夫，吾人深知自己具有道德资质。这种道德资质是天生的、永恒不变的，不是社会演变、后天教育或法律约束的结果。就每个人都有天生的道德资质、都有发展道德资质的意愿而言，人是生而平等的，所以每个人的身体、精神与意愿都应受到基本的尊敬。基本人权的肯定是尊敬人并给予他发展机会的条件。人生的目的是完成道德的自我，在社群中个人本身就是终极目的，他不可化约为其他任何人的工具。
>
> 在国史之中，天赋人权的观念并未自儒家传统中产生，但这是历史演变的结果，并非逻辑的必然。

---

**《财经》：** 和西方的自然法学说和契约论比起来，“仁”的哲学无论就基本内容或历史发展来说，均有很大的不同。

> **林毓生：** 但自然法学说与契约论所支持的天赋人权说，这一点却同样地可由“仁”的观念来支持。
>
> 我们现在思想上，正可进行具有充分理由的与合乎理则的‘创造性转化”，使过去的原则变成现代化的种子。如果我们认为我们现在的思想与精神和我们的传统有正面的密切关系，那么我们要以在我们思想与精神中认同的，文化传统中正面成分为荣。如果这些正面文化传统成分中包括“仁”的观念；那么，作为一个现代的中国人最大的责任与荣耀之一，便是要为建立保障基本人权的法治制度而奋斗。
>
> 人类经验告诉我们，只有法治之下的社会、政治、经济与文化生活最能提供给参与其中的个人免于强制（至最大程度的）个人自由的生活。这种生活最能提供给他需要的各项资讯与知识，而且也使他与其他人在他们各自不同的工作中，产生彼此的合作与协助。所以，保障个人自由的社会最能利用知识，最有生机，最能解决问题。因此，也是最有力量的社会。

---

**《财经》：** 如何理解民主与法治的关系？

> **林毓生：** 实现民主必须先有法治。没有法治，绝不可能有实质的民主与自由。但是由于中国压根没有法治的传统，只有人治和刑罚的传统，这是我们的根本问题所在。建立法治的制度与文化是一个艰苦而繁复的过程。法治绝不能由急遽的革命方式产生，如果以渐进的方式利用前所未有的社会力量建立法治的基础，或有成功的希望。


实现民主必须先有法治。没有法治，绝不可能有实质的民主与自由。但是由于中国压根没有法治的传统，只有人治和刑罚的传统，这是我们的根本问题所在。建立法治的制度与文化是一个艰苦而繁复的过程。

林毓生：在「普遍王权」被怀疑之前，中国永远不可能产生民主

原点日志

ALL POSTS

Should Put All Requests in a Websocket Connection?

Optimization Scheme for React Component Rendering

林毓生：在「普遍王权」被怀疑之前，中国永远不可能产生民主