반응 구성요소를 선언하는 방법에는 여러 가지가 있습니다.

react 구성 요소를 선언하는 방법에는 세 가지가 있습니다. 1. 함수를 사용하여 상태 없는 구성 요소를 정의합니다. 2. "React.createClass()" 메서드를 사용하여 구성 요소를 정의합니다. 3. "React.Component()" 메서드를 사용하여 상태 없는 구성 요소를 정의합니다. 구성 요소를 정의하기 위한 ES6 형식의 구성 요소입니다.

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

React가 구성 요소를 선언(생성)하는 방식:

React 출시 이후에는 모두 동일한 목표를 가지고 다양한 이유로 React 구성 요소를 정의하는 세 가지 방법이 있었습니다.

세 가지 구체적인 방법:

• 상태 비저장 구성 요소의 기능적 정의

• React.createClass()는 구성 요소를 정의합니다

• React.Component()는 구성 요소를 정의합니다

React 구성 요소를 정의하는 세 가지 방법이 있지만 다음 세 가지 정의 방법으로 구성 요소는 차이점이 무엇입니까? 즉, 해당 정의가 나타나는 이유는 무엇입니까? 아래에 간략히 소개하겠습니다.

상태 비저장 기능 구성 요소

상태 비저장 기능 구성 요소 생성은 React 버전 0.14부터 나타나기 시작했습니다. 이는 들어오는 props를 기반으로 한 표시만 담당하고 상태 작업은 포함하지 않는 순수한 디스플레이 구성 요소를 만드는 데 사용됩니다. 특정 무상태 기능 구성 요소는 다음과 같이 말했습니다.

대부분의 React 코드에서 대부분의 구성 요소는 무상태 구성 요소로 작성되며, 이러한 종류의 간단한 조합을 통해 다른 구성 요소로 구성될 수 있으며 하나로 병합하기 위한 디자인 패턴도 있습니다. 대규모 응용 프로그램이 옹호됩니다.

상태 비저장 기능 구성 요소는 공식적으로 렌더링 메서드가 하나만 있는 구성 요소 클래스로 표현되며, 함수 또는 ES6 화살표 함수의 형태로 생성되며 구성 요소는 상태 비저장입니다. 구체적인 생성 형태는 다음과 같습니다.

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

상태 비저장 컴포넌트의 생성 형태는 코드의 가독성을 높이고, 중복되는 코드를 많이 줄여 단 하나의 렌더링 방식으로 단순화하여 컴포넌트 작성의 편의성을 크게 향상시킵니다. 또한 상태 비저장 구성 요소에는 다음과 같은 주목할만한 기능이 있습니다.

상태 비저장 구성 요소의 생성 형태는 코드의 가독성을 높이고 중복 코드를 많이 줄여 단 하나의 렌더링 방법으로 단순화하여 코드의 가독성을 크게 향상시킵니다. 또한 상태 비저장 구성 요소에는 다음과 같은 중요한 기능이 있습니다.

• 구성 요소가 인스턴스화되지 않으며 구성 요소가 렌더링으로 간소화되므로 전반적인 렌더링 성능이 향상됩니다

  메서드의 기능에 따라 Stateless 구성 요소는 구성 요소 인스턴스화 과정에 포함되지 않으므로 초과 메모리를 할당할 필요가 없으므로 성능이 향상됩니다. 어느 정도.

• 구성 요소는 이 개체에 액세스할 수 없습니다.

  상태 비저장 구성 요소에는 인스턴스화 프로세스가 없으므로 구성 요소 this의 개체에 액세스할 수 없습니다. 예를 들어 this.ref, this.state 등에 액세스할 수 없습니다. 액세스하려는 경우 이 형식을 사용하여 구성 요소를 생성할 수 없습니다

• 구성 요소는 수명 주기 메서드에 액세스할 수 없습니다

  상태 비저장 구성 요소는 구성 요소 수명 주기 관리 및 상태 관리가 필요하지 않기 때문에 이 구성 요소 형식의 기본 구현은 다음과 같습니다. 구성 요소의 수명 주기 메서드가 구현되지 않았습니다. 따라서 상태 비저장 구성 요소는 구성 요소의 다양한 수명 주기 관리에 참여할 수 없습니다.

• 상태 비저장 구성 요소는 입력 prop에만 액세스할 수 있습니다. 동일한 prop는 부작용 없이 동일한 렌더링 결과를 얻습니다.

대형 프로젝트에서는 상태 비저장 구성 요소를 가능한 한 간단한 방식으로 분할하는 것이 좋습니다. , React는 향후에 의미 없는 검사, 메모리 할당 등 상태 없는 구성 요소에 대한 일련의 최적화도 수행할 예정이므로 가능하면 상태 없는 구성 요소를 사용하도록 노력하세요.

React.createClass

React.createClass는 React 초기에 권장되는 컴포넌트를 생성하는 방법입니다. ES5의 기본 JavaScript로 구현된 React 컴포넌트입니다.

var InputControlES5 = React.createClass({
    propTypes: {//定义传入props中的属性各种类型
        initialValue: React.PropTypes.string
    },
    defaultProps: { //组件默认的props对象
        initialValue: ''
    },
    // 设置 initial state
    getInitialState: function() {//组件相关的状态对象
        return {
            text: this.props.initialValue || 'placeholder'
        };
    },
    handleChange: function(event) {
        this.setState({ //this represents react component instance
            text: event.target.value
        });
    },
    render: function() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
});
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: &#39;&#39;
};

Stateless와 비교됩니다. 나중에 설명할 React.createClass 및 React.Component는 모두 상태 저장 구성 요소를 생성하며 구성 요소의 수명 주기 메서드에 액세스할 수 있습니다. 그러나 React가 개발되면서 React.createClass 형식 자체의 문제가 노출됩니다.

• React.createClass는 (관심이 필요한 함수만 바인딩하는 React.Component와 달리) 함수 메서드를 자체 바인딩하므로 불필요한 성능 오버헤드로 인해 코드가 쓸모 없게 될 가능성이 높아집니다.

• React.createClass의 믹스인은 충분히 자연스럽고 직관적이지 않습니다. React.Component 형식은 더 직관적인 형식의 믹스인보다 더 강력한 기능을 보여주는 고차 컴포넌트(Higher Order Components--HOC)에 매우 적합합니다. , HOC는 순수 JavaScript이므로 더 이상 사용되지 않을 것에 대해 걱정할 필요가 없습니다. HOC에 대해서는 "상태 비저장 구성 요소 및 고차 구성 요소"를 참조하세요.

React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下：

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };

        // ES6 类中函数必须手动绑定
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: &#39;&#39;
};

推荐学习：《react视频教程》

위 내용은 반응 구성요소를 선언하는 방법에는 여러 가지가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!