ทีม React ได้ประกาศแผนการที่จะปล่อย React 18 เวอร์ชันใหม่ ตอนนี้อยู่ในช่วงเบต้า ในฐานะนักพัฒนา React ฉันต้องการทราบคุณสมบัติใหม่

ในบทความนี้ เราจะมาพูดคุยกันว่า React 18 จะเปลี่ยนชีวิตเราให้ง่ายขึ้นได้อย่างไร

รูท API ใหม่

รูท API เป็นตัวชี้ไปยังโครงสร้างข้อมูลระดับบนสุดที่ React ใช้เพื่อติดตามทรีที่จะแสดงผล ตอนนี้ React มีรูท API สองตัว:

• API รูตเก่าดั้งเดิม — API ที่มีอยู่ด้วยReactDOM.render. API นี้จะถูกเลิกใช้หลังจาก React ออกใหม่
• รูท APIใหม่ — รูท API ใหม่พร้อมReactDOM.createRoot. รูทนี้ใช้งานได้ใน React 18 พร้อมการปรับปรุงและฟีเจอร์ใหม่ทั้งหมด

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

import ReactDOM from 'react-dom';
import App from './App';

// create a root
const root = ReactDOM.createRoot(document.getElementById('app'));

// render an element to the root
root.render(<App />);

แบทช์อัตโนมัติ

แบทช์คือการอัพเดตสถานะ React หลายรายการในการเรนเดอร์ซ้ำครั้งเดียว

function Counter() {
  const [count, setCount] = useState(0);
  const [disabled, setDisabled] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // does not re-render yet
    setDisabled(f => !f); // does not re-render yet
    // React will only re-render once (that's batching!)
  }

  return (
    <div>
      <h1>{count}</h1>
      <button disabled={disabled} onClick={handleClick}>
        Increment
      </button>
    </div>
  );
}

ซึ่งจะช่วยหลีกเลี่ยงการแสดงผลซ้ำที่ไม่จำเป็นและปรับปรุงประสิทธิภาพของเรา แล้วคำขอแบบอะซิงโครนัสล่ะ? React 17 ไม่ได้แบทช์และทำการอัพเดตอิสระสองครั้ง

function Counter() {
  const [count, setCount] = useState(0);
  const [disabled, setDisabled] = useState(false);

  function handleClick() {
    doPostRequest()
      .then(() => {
        setCount(c => c + 1); // does re-render
        setDisabled(f => !f); // does re-render
      })
  }

  return (
    <div>
      <h1>{count}</h1>
      <button disabled={disabled} onClick={handleClick}>
        Increment
      </button>
    </div>
  );
}

startTransition API

ก่อนที่เราจะพูดถึงสิ่งที่startTransitionเป็นอยู่ เรามาตรวจสอบว่าเรามีการอัพเดทสถานะประเภทใดบ้างใน React:

• การอัปเดตด่วน — การโต้ตอบโดยตรง เช่น การพิมพ์ การคลิก การแตะ และอื่นๆ เมื่อมันเกิดขึ้น เราคาดหวังการตอบสนองทันที มิฉะนั้น เราจะคิดว่ามีบางอย่างผิดปกติกับแอปของเรา
• การอัปเดตการเปลี่ยน — การเปลี่ยน UI จากมุมมองหนึ่งไปอีกมุมมองหนึ่ง เราสามารถอธิบายได้เมื่อเราไม่คิดว่าจะเห็นการเปลี่ยนแปลงใดๆ ระหว่างกลางบน UI

setInputValue(inputValue); // Urgent: show what was typed
setSearchQuery(inputValue); // // Not urgent: show filtered list

ใน React 18 มันถูกแก้ไขโดยstartTransitionAPI:

import { startTransition } from 'react';

setInputValue(input);

startTransition(() => {
  // Transition: show filtered list
  setSearchQuery(input);
});

บทสรุป

ขอบคุณสำหรับการอ่าน ฉันหวังว่าคุณพบว่าชิ้นนี้มีประโยชน์ มีความสุขในการเข้ารหัส!

ทรัพยากร