React Stateless는 "{props.xxx}"로 작성됩니다. 해당 Stateless 구성 요소는 주로 템플릿을 정의하고, 상위 구성 요소 props에서 전달된 데이터를 수신하고, "{props.xxx}" 표현식을 사용하여 props를 채우는 데 사용됩니다. 템플릿에.

반응 상태 비저장 쓰기란 무엇입니까?

이 기사의 운영 환경: Windows7 시스템, React17.0.1, Dell G3.

React에서 Stateless를 작성하는 방법은 무엇인가요?

React의 Stateless 컴포넌트와 Stateful 컴포넌트의 작성 방법 및 차이점

React의 컴포넌트는 크게 Stateless 컴포넌트와 Stateful 컴포넌트 두 가지로 나누어집니다.

1. 상태 비저장 구성 요소는 주로 템플릿을 정의하고, 상위 구성 요소 소품에서 전달된 데이터를 수신하고, 템플릿에 소품을 추가하기 위해 {props.xxx} 표현식을 사용하는 데 사용됩니다. 상태 비저장 구성 요소는 구성 요소 재사용을 용이하게 하기 위해 템플릿을 순수하게 유지해야 합니다. 다음과 같이 Stateless 컴포넌트를 생성합니다:

var Header = (props) = (
    <p>{props.xxx}</p>
);
export default Header

로그인 후 복사

2. Stateful 컴포넌트는 주로 상호작용 로직과 비즈니스 데이터를 정의하는 데 사용됩니다(Redux를 사용하면 비즈니스 데이터를 균일하게 추출하고 관리할 수 있습니다). {this.state.xxx} 표현식을 사용합니다. 비즈니스 데이터를 컨테이너 구성 요소(상태 유지 구성 요소는 컨테이너 구성 요소라고도 하며 상태 비저장 구성 요소는 디스플레이 구성 요소라고도 함)의 인스턴스에 마운트한 다음 디스플레이 구성 요소에 소품을 전달합니다. 템플릿 내부에 소품을 추가합니다. 다음과 같이 상태 저장 구성 요소를 만듭니다.

class Home extends React.Component {
    constructor(props) {
        super(props);
    };
    render() {
        return (
            <header></header>  //也可以写成<header></header>
        )
    }
}
export default Home

로그인 후 복사

이것은 생성자에서 기본적으로 매개 변수를 전달해야 하며 하위 클래스의 인스턴스를 얻으려면 super() 메서드를 호출해야 합니다. 하지만 더 혼란스러운 것은 이러한 매개변수를 전달해야 하는 이유와 이러한 매개변수를 전달하는 용도는 무엇입니까?

render()의 구성 요소 관점에서 볼 때 생성자는 매개 변수를 전달하지 않고도 구성 요소 인스턴스의 props 속성을 가져올 수 있습니다.

class Home extends React.Component {
    constructor() {
        super();
    };
    render (){
        return(
            <p>
                <header></header>
            </p>
        );
    };
};

class Header extends React.Component {
    constructor() {
        super();
    };
    render() {
        return (
            <p>{this.props.name}</p>  //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
        );
    };
};

로그인 후 복사

render() 메소드는 하위 컴포넌트 프로토타입의 메소드이므로 이해하기 쉽습니다. 인스턴스 속성을 얻을 때 이를 통해 액세스해야 합니다. 이를 제거하면 얻을 수 없습니다.

그럼 질문이 생깁니다. 생성자의 props에 액세스하려면 어떻게 해야 할까요? 이 시점에서 하위 구성 요소 인스턴스의 props 특성에 액세스할 수 있도록 생성자 생성자에 props 매개 변수를 전달해야 합니다. 다음과 같습니다:

class Header extends React.Component {
    constructor(props) {
        super();
        this.name = props.name;  //获取到子组件实例上的props.name属性，赋值给实例属性name
    };
    render() {
        return (
            <p>{this.name}</p>
        );
    };
};

로그인 후 복사

또 다른 질문이 있습니다. 왜 super(props) 메소드에서 props 속성을 전달해야 합니까? 다음 예를 보세요.

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nameOne: props.name,
            nameTwo: this.props.name  //super()方法中传递了props属性，this.props才可以获取到name属性
        }
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

로그인 후 복사

사실 props.name과 this.props.name의 값은 동일하지만 여전히 다릅니다. props.name의 props는 props의 속성입니다. 하위 구성요소이지만, props.name의 props는 하위 구성요소의 속성 props가 아니지만, 이러한 props는 실제로 super 메소드 호출 시 상위 클래스인 Component로 전달되므로 이렇게 됩니다. .props.name gets는 Component 상위 클래스의 props 속성입니다. React의 소스 코드를 살펴보세요.
반응 상태 비저장 쓰기란 무엇입니까?
서브클래스 슈퍼 메소드가 props 매개변수를 상위 클래스 Component에 전달하고 Component가 props 매개변수를 해당 인스턴스 속성 props에 마운트하는 것을 발견했나요? 따라서 props 매개변수를 super 메소드에 전달해야만 생성자에서 props.xxx를 사용할 수 있습니다. super 메소드에 props 매개변수가 전달되지 않으면 this.props 값을 가져올 때 오류가 보고됩니다. 이름. this.props를 획득하고 이를 비교되지 않은 상태로 표시합니다. 다음과 같이

class Header extends React.Component {
    constructor(props) {
        super();
        this.state = {
            nameOne: this.props.name, 
            nameTwo: this.props  
        };
        console.log(this.props.name);  //报错
        console.log(this.props);  //undifined
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

로그인 후 복사

이 작성 방법의 핵심은 하위 구성 요소 Header의 인스턴스 속성 props를 하위 구성 요소의 인스턴스 속성 state.nameOne 및 state.nameTwo에 할당하는 것입니다. 컴포넌트 헤더 간단히 말하면 헤더 하위 어셈블리입니다. 컴포넌트는 상태 속성을 생성한 다음 자체 상태 속성에 자체 props 속성을 할당합니다.

this.props가 정의되지 않은 상태로 인쇄되는 이유는 무엇입니까? props는 하위 구성 요소를 호출할 때 전달되는 매개 변수이므로 생성자 내에서 props에 액세스할 수 없으므로 this.props.name의 경우 오류가 보고될 것이라는 데는 의심의 여지가 없습니다.

따라서 생성자의 props 매개변수와 super의 props 매개변수에 대해 생성자에서 this.props 및 props를 사용하지 않으면 매개변수를 전혀 전달할 필요가 없습니다. 그렇지 않으면 참조를 전달합니다. 하지만 얻어지는 값은 this.props와 props가 동일하므로 둘 중 하나만 써도 됩니다. 그러나 두 매개변수 모두 공식 문서에 기록되어 있습니다. 엄격함을 위해 모두 적어 보겠습니다.

하지만 저는 개인적으로 아직도 이런 글쓰기 방식을 좋아해요.

constructor(props) {
    super(props);
    this.state = {
        name: props.name
    }
};

로그인 후 복사

이것이 없는 것이 가치이고, 이것이 있는 것이 핵심입니다.

React의 구성 요소는 주로 Stateless 구성 요소와 Stateful 구성 요소의 두 가지 범주로 나뉩니다.

1. 상태 비저장 구성 요소는 주로 템플릿을 정의하고, 상위 구성 요소 소품에서 전달된 데이터를 수신하고, 템플릿에 소품을 추가하기 위해 {props.xxx} 표현식을 사용하는 데 사용됩니다. 상태 비저장 구성 요소는 구성 요소 재사용을 용이하게 하기 위해 템플릿을 순수하게 유지해야 합니다. 다음과 같이 Stateless 컴포넌트를 생성합니다:

var Header = (props) = (
    <p>{props.xxx}</p>
);
export default Header

로그인 후 복사

2. Stateful 컴포넌트는 주로 상호작용 로직과 비즈니스 데이터를 정의하는 데 사용됩니다(Redux를 사용하면 비즈니스 데이터를 균일하게 추출하고 관리할 수 있습니다). {this.state.xxx} 표현식을 사용합니다. 비즈니스 데이터를 컨테이너 구성 요소(상태 유지 구성 요소는 컨테이너 구성 요소라고도 하며 상태 비저장 구성 요소는 디스플레이 구성 요소라고도 함)의 인스턴스에 마운트한 다음 디스플레이 구성 요소에 소품을 전달합니다. 템플릿 내부에 소품을 추가합니다. 다음과 같이 상태 저장 구성 요소를 만듭니다.

class Home extends React.Component {
    constructor(props) {
        super(props);
    };
    render() {
        return (
            <header></header>  //也可以写成<header></header>
        )
    }
}
export default Home

로그인 후 복사

이것은 생성자에서 기본적으로 매개 변수를 전달해야 하며 하위 클래스의 인스턴스를 얻으려면 super() 메서드를 호출해야 합니다. 하지만 더 혼란스러운 것은 이러한 매개변수를 전달해야 하는 이유와 이러한 매개변수를 전달하는 용도는 무엇입니까?

render()의 구성 요소 관점에서 볼 때 생성자는 매개 변수를 전달하지 않고도 구성 요소 인스턴스의 props 속성을 가져올 수 있습니다.

class Home extends React.Component {
    constructor() {
        super();
    };
    render (){
        return(
            <p>
                <header></header>
            </p>
        );
    };
};

class Header extends React.Component {
    constructor() {
        super();
    };
    render() {
        return (
            <p>{this.props.name}</p>  //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
        );
    };
};

로그인 후 복사

class Header extends React.Component {
    constructor(props) {
        super();
        this.name = props.name;  //获取到子组件实例上的props.name属性，赋值给实例属性name
    };
    render() {
        return (
            <p>{this.name}</p>
        );
    };
};

로그인 후 복사

또 다른 질문이 있습니다. 왜 super(props) 메소드에서 props 속성을 전달해야 합니까? 다음 예를 보세요.

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nameOne: props.name,
            nameTwo: this.props.name  //super()方法中传递了props属性，this.props才可以获取到name属性
        }
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

로그인 후 복사

class Header extends React.Component {
    constructor(props) {
        super();
        this.state = {
            nameOne: this.props.name, 
            nameTwo: this.props  
        };
        console.log(this.props.name);  //报错
        console.log(this.props);  //undifined
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

로그인 후 복사

하지만 저는 개인적으로 아직도 이런 글쓰기 방식을 좋아해요.

constructor(props) {
    super(props);
    this.state = {
        name: props.name
    }
};

로그인 후 복사

이것이 없는 것이 가치이고, 이것이 있는 것이 핵심입니다.