반응 구성 요소를 선언하는 몇 가지 방법은 무엇입니까?

반응 구성요소 선언 방법: 1. 함수형 스타일로 정의된 상태 비저장 구성요소 2. es5 기본 방식으로 정의된 구성요소 [React.createClass] 3. es6 형식으로 정의된 구성요소 [확장 React.Component]

React 구성 요소 선언 방법:

1. Stateless 기능 구성 요소

React 버전 0.14부터 시작되었습니다. 들어오는 props를 기반으로 한 디스플레이만 담당하고 상태 작업은 포함하지 않는 순수한 디스플레이 구성 요소를 만드는 데 사용됩니다. 특정 무상태 기능 구성 요소에 대해 관계자는 다음과 같이 지적했습니다.

대부분의 React 코드에서 대부분의 구성 요소는 무상태 구성 요소로 작성되며 이는 간단한 조합을 통해 다른 구성 요소로 구성될 수 있습니다.

이런 종류의 여러 간단한 디자인 패턴을 통해 결합됩니다. 하나의 큰 응용 프로그램으로 옹호됩니다.

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

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

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

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

  구성 요소가 Stateless 구성 요소이기 때문에 렌더링 메서드의 기능으로 단순화되므로 상태 비저장 구성 요소는 구성 요소 인스턴스화 프로세스에 있지 않으며 비인스턴스화 프로세스에서는 과도한 메모리를 할당할 필요가 없으므로 성능이 어느 정도 향상됩니다.

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

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

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

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

• Stateless 구성 요소는 입력 Prop에만 액세스할 수 있습니다. 동일한 Prop은 부작용 없이 동일한 렌더링 결과를 얻습니다.

  Stateless 구성 요소는 대규모 프로젝트에서 간단한 작성을 사용하여 원래 거대한 구성 요소를 나누는 것이 좋습니다. 향후에는 의미 없는 검사, 메모리 할당 등 상태 없는 구성 요소에 대해 일련의 최적화를 수행하므로 가능하면 상태 없는 구성 요소를 사용하도록 하세요.

<code><strong>2、React.createClass</strong>

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;
};

与无状态组件相比，React.createClass和后面要描述的React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。但是随着React的发展，React.createClass形式自身的问题暴露出来：

React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。

React.createClass的mixins不够自然、直观；React.Component形式非常适合高阶组件（Higher Order Components--HOC）,它以更直观的形式展示了比mixins更强大的功能，并且HOC是纯净的JavaScript，不用担心他们会被废弃。HOC可以参考《无状态组件(Stateless Component) 与高阶组件》。

<strong>3、React.Component</strong>2.React.createClass

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.createClass와 React.Component는 모두 상태 저장 구성 요소를 생성하고 구성 요소에 액세스할 수 있습니다. 그러나 React가 개발되면서 React.createClass 형식 자체의 문제가 노출됩니다. React.createClass는 (관심이 필요한 함수만 바인딩하는 React.Component와 달리) 함수 메서드를 자체 바인딩하므로 불필요한 결과가 발생합니다. 성능 오버헤드 및 증가 코드가 더 이상 사용되지 않을 가능성이 있습니다.

React.createClass의 mixins는 충분히 자연스럽고 직관적이지 않습니다. React.Component 형식은 믹스인보다 더 강력한 기능을 보여주는 고차원 구성 요소(Higher Order Components--HOC)에 매우 적합합니다. 더 직관적인 양식 기능과 HOC는 순수한 JavaScript이므로 더 이상 사용되지 않을 것에 대해 걱정할 필요가 없습니다. HOC에 대해서는 "상태 비저장 구성 요소 및 고차 구성 요소"를 참조하세요. 🎜🎜🎜3. React.Component🎜🎜🎜React.Component는 현재 React에서 상태 저장 구성 요소를 만드는 데 가장 권장되는 방법이며 최종적으로는 React를 대체하게 됩니다. createClass 형식은 React.createClass에 비해 더 나은 코드 재사용을 달성할 수 있습니다. 위의 React.createClass 형식을 다음과 같이 React.Component 형식으로 변경합니다. 🎜rrreee🎜🎜관련 학습 권장 사항: 🎜javascript 비디오 튜토리얼🎜🎜🎜

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