useState无效

正常来讲点击button按钮发生onClick事件，然后重新调用函数返回新的jsx，然后react再通过新旧jsx进行对比来重新渲染。

function App() {
  const [friends, setFriends] = useState(['tom', 'lucy'])
  
  function addFriends() {
    friends.push('jack');
    setFriends(friends)
  }
  
  return (
    <div className="App">
      {
        friends.map((friend) => {
          return (
            <li>{friend}</li>
          )
        })
      }
      <button onClick={addFriends}>add friends</button>
    </div>
  );
}

现在定义一个数组friends，用react hook—useState来创建和添加friends数组，返回setFriends函数用来修改friends，添加button按钮，点击button执行addFriends函数。addFriends函数将friends添加jack，并通过setFriends来修改friends，但是并没有改变这是因为setFriends内部做了优化，判断其实friends指针并没有发生变化，因此并没有重新渲染。
那么该怎么办呢？只要想办法让指针发生变化就可以了

function App() {
  const [friends, setFriends] = useState(['tom', 'lucy'])
  
  function addFriends() {
    setFriends([...friends, 'jack'])
  }
  
  return (
    <div className="App">
      {
        friends.map((friend) => {
          return (
            <li>{friend}</li>
          )
        })
      }
      <button onClick={addFriends}>add friends</button>
    </div>
  );
}