Bertindak balas: Negeri X Keadaan Terbitan

Apakah keadaan terbitan? Fikirkan satu keadaan untuk teks dan kemudian satu lagi untuk teks huruf besar.

Negeri Terbitan

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const [uppercaseText, setUppercaseText] = useState(text.toUpperCase());

    useEffect(() => {
        setUppercaseText(text.toUpperCase());
    }, [text])

    ...
}

Menyatakan seperti itu adalah gila untuk berfikir bahawa sesiapa sahaja akan melakukan ini… betul? BETUL?

Ya, contoh seperti ini akan menjelaskan bahawa ini salah.

Keburukan Negara Terbitan

• Disimpan secara berasingan dan tidak selari dengan keadaan sebenar.
• Pencetus (bergantung) pada pemaparan semula yang tidak perlu.

Bagaimana untuk memfaktorkan semula keadaan terbitan?

Katakan ini pengiraan yang mahal… penyelesaiannya ialah menggunakan useMemo.

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const uppercaseText = useMemo(() => text.toUpperCase(), [text]);
    ...
}

Bagaimana dengan cepat melihat keadaan yang boleh diperolehi?

Saya telah menghasilkan cara berfikir yang baik yang sepatutnya memudahkan untuk TAHU jika sesuatu negeri itu sepatutnya "keadaan lain" atau hanya harta yang dikira (dihafal atau tidak bergantung pada kes).

function Foo({
    text = 'hello, za warudo!',
    uppercaseText = text.toUpperCase(),
}) {
    ...
}

// Forget react for a moment...
// Would you ever call a function like this?
const text = 'hello, za warudo!';
Foo({
    text,
    uppercaseText: text.toUpperCase(),
});

Jika anda menganggap keadaan tersebut sebagai "props", maka ini menjadikannya lebih jelas keadaan yang sepatutnya.

Lupakan React sepenuhnya, fikirkan hanya fungsi:
Adakah anda akan memanggil fungsi dengan pembolehubah dan kemudian pembolehubah lain yang anda boleh kira di dalamnya?

Atas ialah kandungan terperinci Bertindak balas: Negeri X Keadaan Terbitan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!