จะใช้ componentWillMount () ใน React Hooks ได้อย่างไร?

ในเอกสารทางการของ React ที่กล่าวถึง -

หากคุณคุ้นเคยกับวิธีวงจรชีวิตของคลาส React คุณสามารถคิดถึง useEffect Hook เป็น componentDidMount, componentDidUpdate และ componentWillUnmount รวมกัน

คำถามของฉันคือ - เราจะใช้componentWillMount()วิธี lifecyle ในเบ็ดได้อย่างไร

คุณไม่สามารถใช้ใด ๆ ของวิธีการที่วงจรชีวิตที่มีอยู่ ( componentDidMount, componentDidUpdate, componentWillUnmountฯลฯ ) ในเบ็ด สามารถใช้ได้ในส่วนประกอบของคลาสเท่านั้น และด้วย Hooks คุณสามารถใช้งานได้เฉพาะในส่วนประกอบที่ใช้งานได้เท่านั้น บรรทัดด้านล่างมาจากเอกสารตอบโต้:

ถ้าคุณคุ้นเคยกับการตอบสนองวิธีวงจรชั้นที่คุณสามารถคิดuseEffectตะขอเป็นcomponentDidMount, componentDidUpdateและcomponentWillUnmountรวม

แนะนำคือคุณสามารถเลียนแบบวิธีวงจรชีวิตเหล่านี้จากองค์ประกอบชั้นเรียนในองค์ประกอบการทำงาน

โค้ดด้านในcomponentDidMountทำงานครั้งเดียวเมื่อประกอบเข้ากับอุปกรณ์ useEffecthook ที่เทียบเท่ากับพฤติกรรมนี้คือ

useEffect(() => {
  // Your code here
}, []);

สังเกตเห็นพารามิเตอร์ที่สองที่นี่ (อาร์เรย์ว่าง) สิ่งนี้จะทำงานเพียงครั้งเดียว

โดยไม่ต้องพารามิเตอร์ที่สองuseEffectเบ็ดจะถูกเรียกว่าในทุกการแสดงผลของส่วนประกอบที่อาจเป็นอันตรายได้

useEffect(() => {
  // Your code here
});

componentWillUnmountใช้สำหรับล้างข้อมูล (เช่นลบผู้ฟังเหตุการณ์ยกเลิกตัวจับเวลา ฯลฯ ) สมมติว่าคุณกำลังเพิ่มผู้ฟังเหตุการณ์ในcomponentDidMountและลบออกcomponentWillUnmountเป็นด้านล่าง

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

ตะขอเทียบเท่าของรหัสข้างต้นจะเป็นดังนี้

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

useComponentDidMount hook

ในกรณีส่วนใหญ่useComponentDidMountเป็นเครื่องมือที่ใช้ มันจะทำงานเพียงครั้งเดียวหลังจากองค์ประกอบได้ติดตั้ง (แสดงผลเริ่มต้น)

 const useComponentDidMount = func => useEffect(func, []);

useComponentWillMount

มันเป็นสิ่งสำคัญที่จะต้องทราบว่าในองค์ประกอบของชั้นเรียนcomponentWillMountถือว่าเป็นมรดก หากคุณต้องการให้โค้ดรันเพียงครั้งเดียวก่อนที่ส่วนประกอบจะประกอบเข้าด้วยกันคุณสามารถใช้ Constructor ได้ เพิ่มเติมได้ที่นี่ เนื่องจากส่วนประกอบที่ใช้งานได้ไม่มีตัวสร้างความสมดุลของคอนสตรัคเตอร์ดังนั้นการใช้ hook เพื่อรันโค้ดเพียงครั้งเดียวก่อนที่การเมาท์คอมโพเนนต์จะสมเหตุสมผลในบางกรณี คุณสามารถทำได้ด้วยเบ็ดที่กำหนดเอง

const useComponentWillMount = func => {
  const willMount = useRef(true);

  if (willMount.current) {
    func();
  }

  willMount.current = false;
};

อย่างไรก็ตามมีข้อผิดพลาด อย่าใช้เพื่อตั้งค่าสถานะของคุณแบบอะซิงโครนัส (เช่นการติดตามคำขอของเซิร์ฟเวอร์เนื่องจากคุณอาจคาดว่ามันจะส่งผลต่อการเรนเดอร์เริ่มต้นที่มันจะไม่) useComponentDidMountกรณีดังกล่าวควรจะจัดการกับ

การสาธิต

const Component = (props) => {
  useComponentWillMount(() => console.log("Runs only once before component mounts"));
  useComponentDidMount(() => console.log("Runs only once after component mounts"));
  ...

  return (
    <div>{...}</div>
  );
}

การสาธิตเต็มรูปแบบ

ตาม reactjs.org, componentWillMount จะไม่ได้รับการสนับสนุนในอนาคต https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

ไม่จำเป็นต้องใช้ componentWillMount

หากคุณต้องการทำบางสิ่งบางอย่างก่อนที่ส่วนประกอบจะประกอบเข้าด้วยกันให้ทำใน Constructor ()

ถ้าคุณต้องการที่จะทำคำขอเครือข่ายอย่าทำมันใน componentWillMount เป็นเพราะการทำเช่นนี้จะนำไปสู่ข้อผิดพลาดที่ไม่คาดคิด

คำขอเครือข่ายสามารถทำได้ใน componentDidMount

หวังว่ามันจะช่วย

อัปเดตเมื่อ 08/03/2019

เหตุผลที่คุณถาม componentWillMount อาจเป็นเพราะคุณต้องการเริ่มต้นสถานะก่อนที่จะแสดงผล

เพียงทำใน useState

const helloWorld=()=>{
    const [value,setValue]=useState(0) //initialize your state here
    return <p>{value}</p>
}
export default helloWorld;

หรือบางทีคุณต้องการเรียกใช้ฟังก์ชั่นใน componentWillMount ตัวอย่างเช่นหากรหัสต้นฉบับของคุณมีลักษณะดังนี้:

componentWillMount(){
  console.log('componentWillMount')
}

ด้วย hook สิ่งที่คุณต้องทำคือลบเมธอด lifecycle:

const hookComponent=()=>{
    console.log('componentWillMount')
    return <p>you have transfered componeWillMount from class component into hook </p>
}

ฉันแค่อยากจะเพิ่มบางสิ่งลงในคำตอบแรกเกี่ยวกับการใช้งานผล

useEffect(()=>{})

useEffect รันบนการแสดงผลทุกครั้งเป็นการรวมกันของ componentDidUpdate, componentDidMount และ ComponentWillUnmount

 useEffect(()=>{},[])

ถ้าเราเพิ่มอาเรย์ที่ว่างใน useEffect มันจะทำงานเมื่อส่วนประกอบที่เมาท์ เป็นเพราะ useEffect จะเปรียบเทียบอาร์เรย์ที่คุณส่งไปให้ ดังนั้นจึงไม่จำเป็นต้องเป็นอาเรย์ที่ว่างเปล่ามันสามารถเป็นอาเรย์ที่ไม่เปลี่ยนแปลง ตัวอย่างเช่นมันอาจเป็น [1,2,3] หรือ ['1,2'] useEffect ยังคงทำงานเมื่อติดตั้งคอมโพเนนต์เท่านั้น

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

ฉันสร้างตัวอย่างสำหรับเบ็ด กรุณาตรวจสอบมัน

https://codesandbox.io/s/kw6xj153wr

อัปเดตเมื่อ 21/08/2019

มันเป็นสีขาวตั้งแต่ฉันเขียนคำตอบข้างต้น มีบางอย่างที่ฉันคิดว่าคุณต้องใส่ใจ เมื่อคุณใช้

useEffect(()=>{},[])

เมื่อตอบสนองเปรียบเทียบค่าที่คุณส่งผ่านไปยังอาร์เรย์ [] มันจะใช้ Object.is () เพื่อเปรียบเทียบ หากคุณส่งวัตถุไปให้เช่น

useEffect(()=>{},[{name:'Tom'}])

ตรงนี้เป็นเช่นเดียวกับ:

useEffect(()=>{})

มันจะแสดงผลใหม่ทุกครั้งเพราะเมื่อ Object.is () เปรียบเทียบวัตถุมันเปรียบเทียบการอ้างอิงไม่ใช่ค่าตัวเอง มันเหมือนกับเหตุผลที่ {} === {} ส่งคืนค่าเท็จเนื่องจากการอ้างอิงของพวกเขาแตกต่างกัน หากคุณยังต้องการเปรียบเทียบวัตถุเองไม่ใช่การอ้างอิงคุณสามารถทำสิ่งนี้:

useEffect(()=>{},[JSON.stringify({name:'Tom'})])

useLayoutEffectสามารถทำสิ่งนี้ได้ด้วยชุดผู้สังเกตการณ์ที่ว่างเปล่า ( []) หากการทำงานคล้ายกับจริงcomponentWillMount- มันจะทำงานก่อนที่เนื้อหาแรกจะเข้าสู่ DOM - แม้ว่าจะมีการอัปเดตสองรายการ แต่จะซิงโครไนซ์ก่อนที่จะวาดลงบนหน้าจอ

ตัวอย่างเช่น:

function MyComponent({ ...andItsProps }) {
     useLayoutEffect(()=> {
          console.log('I am about to render!');
     },[]);

     return (<div>some content</div>);
}

ผลประโยชน์เหนือกว่าuseStateกับ initializer / setter หรือuseEffectแม้ว่ามันอาจคำนวณการส่งผ่านการเรนเดอร์ แต่ก็ไม่มีการแสดงผลซ้ำไปยัง DOM ที่ผู้ใช้จะสังเกตเห็นและจะทำงานก่อนการเรนเดอร์ที่สังเกตเห็นได้ครั้งแรกuseEffect. ข้อเสียคือความล่าช้าเล็กน้อยในการเรนเดอร์ครั้งแรกของคุณเนื่องจากการตรวจสอบ / การอัปเดตจะต้องเกิดขึ้นก่อนที่จะทาสีลงบนหน้าจอ มันขึ้นอยู่กับการใช้งานของคุณจริงๆ

ฉันคิดว่าเป็นการส่วนตัวuseMemoได้ดีในบางกรณีที่คุณต้องทำอะไรหนัก ๆ - ตราบใดที่คุณจำไว้ว่ามันเป็นข้อยกเว้นเทียบกับบรรทัดฐาน

นี่คือวิธีที่ฉันจำลองตัวสร้างในส่วนประกอบการทำงานโดยใช้useRefตะขอ:

function Component(props) {
    const willMount = useRef(true);
    if (willMount.current) {
        console.log('This runs only once before rendering the component.');
        willMount.current = false;        
    }

    return (<h1>Meow world!</h1>);
}

นี่คือตัวอย่างวงจรชีวิต:

function RenderLog(props) {
    console.log('Render log: ' + props.children);
    return (<>{props.children}</>);
}

function Component(props) {

    console.log('Body');
    const [count, setCount] = useState(0);
    const willMount = useRef(true);

    if (willMount.current) {
        console.log('First time load (it runs only once)');
        setCount(2);
        willMount.current = false;
    } else {
        console.log('Repeated load');
    }

    useEffect(() => {
        console.log('Component did mount (it runs only once)');
        return () => console.log('Component will unmount');
    }, []);

    useEffect(() => {
        console.log('Component did update');
    });

    useEffect(() => {
        console.log('Component will receive props');
    }, [count]);


    return (
        <>
        <h1>{count}</h1>
        <RenderLog>{count}</RenderLog>
        </>
    );
}

[Log] Body
[Log] First time load (it runs only once)
[Log] Body
[Log] Repeated load
[Log] Render log: 2
[Log] Component did mount (it runs only once)
[Log] Component did update
[Log] Component will receive props

แน่นอนว่าองค์ประกอบของคลาสไม่มีBodyขั้นตอนเป็นไปไม่ได้ที่จะทำการจำลอง 1: 1 เนื่องจากแนวคิดของฟังก์ชันและคลาสที่แตกต่างกัน

ฉันเขียน hook แบบกำหนดเองที่จะเรียกใช้ฟังก์ชันหนึ่งครั้งก่อนแสดงผลครั้งแรก

useBeforeFirstRender.js

import { useState, useEffect } from 'react'

export default (fun) => {
  const [hasRendered, setHasRendered] = useState(false)

  useEffect(() => setHasRendered(true), [hasRendered])

  if (!hasRendered) {
    fun()
  }
}

การใช้งาน:

import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'


export default () => { 
  useBeforeFirstRender(() => {
    console.log('Do stuff here')
  })

  return (
    <div>
      My component
    </div>
  )
}

มีวิธีแก้ปัญหาที่ดีที่จะใช้เป็นcomponentDidMountและมีcomponentWillUnmountuseEffect

ตามเอกสารuseEffectสามารถส่งคืนฟังก์ชัน "การล้างข้อมูล" ฟังก์ชั่นนี้จะไม่ถูกเรียกใช้ในการuseEffectโทรครั้งแรกเฉพาะในการโทรครั้งต่อไป

ดังนั้นถ้าเราใช้useEffecthook ที่ไม่มีการพึ่งพาเลย hook จะถูกเรียกก็ต่อเมื่อส่วนประกอบถูกเมาท์และฟังก์ชั่น "cleanup" จะถูกเรียกเมื่อส่วนประกอบนั้นถูก unmount

useEffect(() => {
    console.log('componentDidMount');

    return () => {
        console.log('componentWillUnmount');
    };
}, []);

การเรียกฟังก์ชันการล้างคืนจะถูกเรียกใช้เฉพาะเมื่อไม่มีการต่อเชื่อมส่วนประกอบ

หวังว่านี่จะช่วยได้

คุณสามารถแฮ็ก useMemo hook เพื่อเลียนแบบวงจรชีวิตของ componentWillMount แค่ทำ:

const Component = () => {
   useMemo(() => {
     // componentWillMount events
   },[]);
   useEffect(() => {
     // componentWillMount events
     return () => {
       // componentWillUnmount events
     }
   }, []);
};

คุณจะต้องใช้ useMemo hook ก่อนที่จะโต้ตอบกับสถานะของคุณ นี่ไม่ใช่วิธีการที่ตั้งใจ แต่มันทำงานสำหรับฉันสำหรับปัญหา componentWillMount ทั้งหมด

ใช้งานได้เนื่องจาก useMemo ไม่ต้องการคืนค่าจริง ๆ และคุณไม่จำเป็นต้องใช้มันเป็นอะไรเลย แต่เนื่องจากมันจดจำค่าตามการพึ่งพาซึ่งจะทำงานเพียงครั้งเดียว ("[]") และมันอยู่ด้านบนส่วนประกอบของเรา ทำงานครั้งเดียวเมื่อส่วนประกอบติดตั้งก่อนสิ่งอื่นใด

https://reactjs.org/docs/hooks-reference.html#usememo

โปรดจำไว้ว่าฟังก์ชั่นที่ส่งผ่านไปยัง useMemo ทำงานในระหว่างการแสดงผล อย่าทำอะไรที่นั่นซึ่งปกติคุณจะไม่ทำในขณะที่เรนเดอร์ ตัวอย่างเช่นผลข้างเคียงอยู่ใน useEffect ไม่ใช่ useMemo

คำตอบของ Ben Carp ดูเหมือนจะใช้ได้กับฉันคนเดียวเท่านั้น

แต่เนื่องจากเราใช้วิธีการทำงานเพียงวิธีการอื่นสามารถได้รับประโยชน์จากการปิดและ HoC:

const InjectWillmount = function(Node, willMountCallback) {
  let isCalled = true;
  return function() {
    if (isCalled) {
      willMountCallback();
      isCalled = false;
    }
    return Node;
  };
};

จากนั้นใช้:

const YourNewComponent = InjectWillmount(<YourComponent />, () => {
  console.log("your pre-mount logic here");
});

คำตอบสั้น ๆ สำหรับคำถามต้นฉบับของคุณcomponentWillMountจะใช้กับ React Hooks ได้อย่างไร:

componentWillMountจะเลิกใช้แล้วและถือว่าเป็นมรดก ตอบสนองคำแนะนำ :

โดยทั่วไปเราขอแนะนำให้ใช้ตัวสร้าง () แทนการเริ่มต้นสถานะ

ในคำถามที่พบบ่อยเกี่ยวกับHook ที่คุณพบสิ่งที่เทียบเท่าของตัวสร้างคลาสสำหรับองค์ประกอบฟังก์ชั่นคือ:

ตัวสร้าง: องค์ประกอบฟังก์ชั่นไม่จำเป็นต้องมีตัวสร้าง คุณสามารถเริ่มต้นสถานะในการใช้ callState หากการคำนวณสถานะเริ่มต้นมีราคาแพงคุณสามารถส่งผ่านฟังก์ชั่นเพื่อใช้สถานะ

ดังนั้นตัวอย่างการใช้งานcomponentWillMountมีลักษณะดังนี้:

const MyComp = () => {
  const [state, setState] = useState(42) // set initial value directly in useState 
  const [state2, setState2] = useState(createInitVal) // call complex computation

  return <div>{state},{state2}</div>
};

const createInitVal = () => { /* ... complex computation or other logic */ return 42; };

เพียงแค่เพิ่มอาร์เรย์ dependenncy ว่างใน useEffect componentDidMountมันจะทำงานเป็น

useEffect(() => {
  // Your code here
  console.log("componentDidMount")
}, []);

มีเคล็ดลับง่ายๆในการจำลองcomponentDidMountและcomponentWillUnmountโดยใช้useEffect:

useEffect(() => {
  console.log("componentDidMount");

  return () => {
    console.log("componentWillUnmount");
  };
}, []);