React Hooks 问题 - useState 更新不渲染组件

※ 问题描述
具体操作：初始化渲染列表，点击按钮向列表中添加数据。
实际效果：页面上的列表并未更新。

import {List, Button} from 'antd';
import React, {useState, useEffect} from 'react';

const data = ['Anoyi', 'com'];

export default () => {
  const [lines, setLines] = useState<string[]>([]);
  useEffect(() => setLines(data), []);

  const addLine = () => {
    data.push('aaa');
    setLines(data);
  }

  return (
    <>
      <List bordered dataSource={lines} renderItem={item => <List.Item>{item}</List.Item>}/>
      <Button type="primary" onClick={addLine}>Add</Button>
    </>
  );

};

※ 解决办法
setLines 赋值新的数组对象，而不是原数组对象的引用。

import {List, Button} from 'antd';
import React, {useState, useEffect} from 'react';

const data = ['Anoyi', 'com'];

export default () => {
  const [lines, setLines] = useState<string[]>([]);
  useEffect(() => setLines(data), []);

  const addLine = () => {
    data.push('aaa');
    setLines([...data]);
    // setLines(data.slice());   // 二选一
  }

  return (
    <>
      <List bordered dataSource={lines} renderItem={item => <List.Item>{item}</List.Item>}/>
      <Button type="primary" onClick={addLine}>Add</Button>
    </>
  );

};

※ 原因分析
这个涉及到可变对象和不可变对象的知识，在 vue 和 react 中，如果更新可变对象时，可能不会引起视图更新，这是因为 vue 和 react 默认都是浅监听，内层数据发生改变，并不会监听到。