Preact X 的最新消息

Preact X 是 Preact 8.x 的一大進步。我們重新思考了我們的程式碼的每一個位元和位元組，並在此過程中加入了許多主要功能。對於支援更多第三方函式庫的相容性增強也是如此。

簡而言之，Preact X 就是我們一直希望 Preact 成為的樣子：一個小巧、快速且功能豐富的函式庫。說到大小，你會很樂意聽到，所有新功能和改進的渲染都與 8.x 具有相同的大小！

片段

片段 是 Preact X 的主要新功能，也是重新思考 Preact 架構的主要動機之一。它們是一種特殊類型的元件，可將子元素與其父元素內聯渲染，而無需額外的包裝 DOM 元素。最重要的是，它們允許你從 render 傳回多個節點。

片段文件 →

function Foo() {
  return (
    <>
      <div>A</div>
      <div>B</div>
    </>
  )
}

在 REPL 中執行

componentDidCatch

我們都希望錯誤不會發生在我們的應用程式中，但有時它們確實會發生。使用 componentDidCatch，現在可以捕捉和處理在生命週期方法（例如 render）中發生的任何錯誤，包括元件樹深處的例外。這可用於顯示使用者友善的錯誤訊息，或在發生問題時將日誌項目寫入外部服務。

生命週期文件 →

class Catcher extends Component {
  state = { errored: false }

  componentDidCatch(error) {
    this.setState({ errored: true });
  }

  render(props, state) {
    if (state.errored) {
      return <p>Something went badly wrong</p>;
    }
    return props.children;
  }
}

在 REPL 中執行

Hooks

Hooks 是一種新的方式，可以更輕鬆地在元件之間共用邏輯。它們代表了現有基於類別的元件 API 的替代方案。在 Preact 中，它們存在於可透過 preact/hooks 匯入的附加元件中

Hooks 文件 →

function Counter() {
  const [value, setValue] = useState(0);
  const increment = useCallback(() => setValue(value + 1), [value]);

  return (
    <div>
      Counter: {value}
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在 REPL 中執行

createContext

createContext-API 是 getChildContext() 的真正繼任者。雖然當你絕對確定永遠不會變更值時，getChildContext 很好用，但只要提供者和消費者之間的元件透過傳回 false 來封鎖更新時，shouldComponentUpdate，它就會失效。有了新的內容 API，這個問題現在已經成為過去。這是一個真正的 pub/sub 解决方案，可以將更新傳遞到樹的深處。

createContext 文件 →

const Theme = createContext('light');

function ThemedButton(props) {
  return (
    <Theme.Consumer>
      {theme => <div>Active theme: {theme}</div>}
    </Theme.Consumer>
  );
}

function App() {
  return (
    <Theme.Provider value="dark">
      <SomeComponent>
        <ThemedButton />
      </SomeComponent>
    </Theme.Provider>
  );
}

CSS 自訂屬性

有時，小事可以產生巨大的影響。有了 CSS 的最新進展，你可以利用 CSS 變數進行樣式設定

function Foo(props) {
  return <div style={{ '--theme-color': 'blue' }}>{props.children}</div>;
}

相容性核心

儘管我們一直熱衷於新增新功能並推動 Preact 的進步，但 preact-compat 套件並未獲得那麼多的關注。到目前為止，它一直存在於一個獨立的儲存庫中，這使得協調跨 Preact 和相容性層的大型變更變得更加困難。透過將相容性移至與 Preact 本身相同的套件中，無需額外安裝即可使用 React 生態系統中的函式庫。

相容性層現在稱為 preact/compat，並學會了許多新技巧，例如 forwardRef、memo 和無數的相容性改進。

// Preact 8.x
import React from "preact-compat";

// Preact X
import React from "preact/compat";

許多相容性修正

這些修正太多，無法一一列出，但我們在與 React 生態系統的函式庫相容性方面已大幅進步。我們特別確保在我們的測試過程中包含幾個熱門套件，以確保我們可以保證對它們提供完全支援。

如果你遇到一個與 Preact 8 不相容的函式庫，你應該再試一次 X。一切都按預期運作的機率很高 ;)