반응 수명주기의 세 가지 프로세스는 무엇입니까

리액트 라이프사이클의 세 가지 프로세스: 1. 인스턴스화 기간이라고도 불리는 마운팅 기간은 구성 요소 인스턴스가 처음 생성되는 프로세스입니다. 2. 존재 기간이라고도 하는 업데이트 기간은 다음과 같습니다. 컴포넌트가 다시 생성됩니다. 렌더링 프로세스 3. 파기 기간이라고도 불리는 언로드 기간은 컴포넌트가 사용 후 파기되는 프로세스입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React 수명주기의 세 가지 프로세스는 무엇인가요?

React의 수명주기는 크게 마운팅, 렌더링, 제거의 세 단계로 나뉩니다.

생성부터 성장, 최종적으로 사망까지 이 프로세스의 시간은 다음과 같습니다. 생애주기로 이해될 수 있다. React의 생명주기도 그러한 과정이다.

React의 수명 주기는 탑재 기간(인스턴스화 기간이라고도 함), 업데이트 기간(존재 기간이라고도 함), 제거 기간(파기 기간이라고도 함)의 세 단계로 나뉩니다. React는 각 주기마다 몇 가지 후크 기능을 제공합니다.

라이프 사이클은 다음과 같이 설명됩니다.

• 마운팅 기간: 구성 요소 인스턴스의 초기 생성 프로세스입니다.

• 업데이트 기간: 구성 요소를 생성한 후 다시 렌더링하는 프로세스입니다.

• 제거 기간: 사용 후 구성 요소가 파기되는 과정입니다.

컴포넌트 마운트:

컴포넌트가 처음 생성된 후 첫 번째 렌더링이 마운트 기간입니다. 마운트 기간 동안 일부 메소드는 다음과 같이 순서대로 트리거됩니다.

• constructor(생성자, 초기화 상태 값)
• getInitialState(상태 머신 설정)
• getDefaultProps(기본 prop 가져오기)
• UNSAFE_comComponentWillMount(첫 번째 렌더링 실행됨) 전)
• render(렌더링 컴포넌트)
• comComponentDidMount(렌더링 렌더링 후 수행되는 작업)

//组件挂载import React from 'react';import ReactDOM from 'react-dom';class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        this.state={};
        console.log("2,设置状态机");
    }
    static defaultProps={
        name:"React",
    }
    UNSAFE_componentWillMount(nextProps, nextState, nextContext) {
        console.log("3,完成首次渲染前调用");
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <p>
                </p><p>{this.props.name}</p>
            
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render渲染后的操作")
    }}ReactDOM.render(<helloworld></helloworld>, document.getElementById('root'));

컴포넌트 업데이트:
컴포넌트 업데이트는 컴포넌트의 초기 렌더링 이후의 컴포넌트 업데이트를 의미합니다. 상태. 라이프 사이클에서 React의 업데이트 프로세스에는 다음 메서드가 포함됩니다.

• UNSAFE_comComponentWillReceiveProps: 이 메서드는 상위 구성 요소가 하위 구성 요소 상태를 업데이트할 때 호출됩니다.
• shouldComponentUpdate: 이 메서드는 구성 요소 상태 또는 소품의 변경으로 구성 요소를 다시 렌더링해야 하는지 여부를 결정합니다.
• UNSAFE_comComponentWillUpdate: 이 메서드는 UNSAFE_comComponentWillMount 메서드와 유사하게 다시 렌더링하기 직전에 구성 요소가 새 상태나 속성을 수락할 때 호출됩니다.
• comComponentDidUpdate: 이 메소드는 componentDidMount 메소드와 유사하게 구성요소가 다시 렌더링된 후에 호출됩니다.

//组件更新class HelloWorldFather extends React.Component{
    constructor(props) {
        super(props);
        this.updateChildProps=this.updateChildProps.bind(this);
        this.state={  //初始化父组件
            name:"React"
        }
    }
    updateChildProps(){  //更新父组件state
        this.setState({
            name:"Vue"
        })
    }
    render() {
        return (
            <p>
                <helloworld></helloworld>  {/*父组件的state传递给子组件*/}
                <button>更新子组件props</button>
            </p>
        )
    }}class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        console.log("2,设置状态机")
    }
    UNSAFE_componentWillMount() {
        console.log("3,完成首次渲染前调用");
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        console.log("6,父组件更新子组件时调用该方法");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("7,决定组件props或者state的改变是否需要重新进行渲染");
        return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log("8,当接收到新的props或state时，调用该方法");
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <p>
                </p><p>{this.props.name}</p>
            
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render后的操作");
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("9,组件被重新选然后调用该方法");
    }}ReactDOM.render(<helloworldfather></helloworldfather>,document.getElementById("root"));

"하위 구성 요소 속성 업데이트"를 클릭한 후:

구성 요소 제거:
수명 주기의 마지막 프로세스는 구성 요소 제거 기간, 즉 구성 요소 폐기 기간입니다. 이 프로세스에는 주로 DOM 트리에서 구성 요소가 삭제될 때 호출되는 하나의 메서드인 componentWillUnmount가 포함됩니다.

//组件卸载class HelloWorldFather extends React.Component{
    constructor(props) {
        super(props);
        this.updateChildProps=this.updateChildProps.bind(this);
        this.state={  //初始化父组件
            name:"React"
        }
    }
    updateChildProps(){  //更新父组件state
        this.setState({
            name:"Vue"
        })
    }
    render() {
        return (
            <p>
                <helloworld></helloworld>  {/*父组件的state传递给子组件*/}
                <button>更新子组件props</button>
            </p>
        )
    }}class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        console.log("2,设置状态机")
    }
    UNSAFE_componentWillMount() {
        console.log("3,完成首次渲染前调用");
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        console.log("6,父组件更新子组件时调用该方法");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("7,决定组件props或者state的改变是否需要重新进行渲染");
        return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log("8,当接收到新的props或state时，调用该方法");
    }
    delComponent(){  //添加卸载方法
        ReactDOM.unmountComponentAtNode(document.getElementById("root"));
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <p>
                </p><p>{this.props.name}</p>
                <button>卸载组件</button>  {/*声明卸载按钮*/}
            
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render后的操作");
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("9,组件被重新选然后调用该方法");
    }
    componentWillUnmount() {  //组件卸载后执行
        console.log("10,组件已被卸载");
    }}ReactDOM.render(<helloworldfather></helloworldfather>,document.getElementById("root"));

제거 버튼을 클릭한 후:

개요 구성 요소 수명 주기:

[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]

위 내용은 반응 수명주기의 세 가지 프로세스는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!