React에서 컴포넌트를 생성하는 세 가지 방법과 차이점

이 글에서는 주로 React에서 컴포넌트를 생성하는 세 가지 방법과 그 차이점을 소개합니다. 참고할만한 가치가 있으니 함께 살펴보겠습니다.

React 출시 이후 다양한 React 컴포넌트를 정의하는 방법이 세 가지가 있었습니다. ; 세 가지 구체적인 방법:

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

• es5 React.createClass가 정의한 구성 요소

• es6 양식은 React.Component에 의해 정의된 구성 요소를 확장합니다.

리액트 컴포넌트를 정의하는 방법에는 세 가지가 있는데, 이 세 가지 컴포넌트 정의 방법의 차이점은 무엇인가요? 즉, 해당 정의가 나타나는 이유는 무엇입니까? 아래에 간략히 소개하겠습니다.

상태 비저장 기능 구성 요소

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

대부분의 React 코드에서 대부분의 구성 요소는 간단한 조합을 통해 다른 구성 요소에 내장될 수 있는 상태 없는 구성 요소로 작성되며 이는 여러 개의 단순 구성 요소와 병합된 구성 요소를 통해 수행됩니다. 대규모 응용 프로그램이 옹호됩니다.

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

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

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

1. 구성 요소가 인스턴스화되지 않고 전체 렌더링 성능이 향상됩니다.

렌더링 방법 무상태 구성 요소이기 때문에 상태 없는 구성 요소는 구성 요소 인스턴스화 프로세스에 포함되지 않으며 비인스턴스화 프로세스는 과도한 메모리를 할당할 필요가 없으므로 성능이 어느 정도 향상됩니다.

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

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

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

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

4. 동일한 props는 부작용 없이 동일한 렌더링 결과를 얻을 수 있습니다.

Stateless 구성 요소는 대규모 프로젝트에서 원본을 분할하는 데 최대한 간단하게 사용하는 것이 좋습니다. 대규모 구성 요소의 경우 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 (
 <p>
 Type something:
 <input onChange={this.handleChange} value={this.state.text} />
 </p>
 );
 }
});
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: &#39;&#39;
};

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

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

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

• React.Component

React.Component는 현재 React에서 상태 저장 구성 요소를 만드는 데 가장 권장되는 방법이며, 결국 React와 관련하여 React.createClass 형식을 대체하게 됩니다. .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 (
 <p>
 Type something:
 <input onChange={this.handleChange}
 value={this.state.text} />
 </p>
 );
 }
}
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: &#39;&#39;
};

React.createClass와 React.Component의 차이점

정의된 두 컴포넌트의 서로 다른 구문 형식에 따라 위에 표시된 코드에는 둘 사이에 중요한 차이점이 많이 있습니다. 둘 사이의 주요 차이점은 아래에 설명되어 있습니다.

이 자체 바인딩 기능

React.createClass에 의해 생성된 구성 요소는 각 멤버 함수의 this가 React에 의해 자동으로 바인딩됩니다. 언제든지 사용하면 함수에서 this.method를 직접 사용할 수 있습니다. 올바르게 설정하세요.

const Contacts = React.createClass({ 
 handleClick() {
 console.log(this); // React Component instance
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

class Contacts extends React.Component { 
 constructor(props) {
 super(props);
 }
 handleClick() {
 console.log(this); // null
 }
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }

当然，React.Component有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定。拿上例的handleClick函数来说，其绑定可以有：

 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this); //构造函数中绑定
 }

<p onClick={this.handleClick.bind(this)}></p> //使用bind来绑定
   <p onClick={()=>this.handleClick()}></p> //使用arrow function来绑定

组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的

const TodoItem = React.createClass({
 propTypes: { // as an object
 name: React.PropTypes.string
 },
 getDefaultProps(){ // return a object
 return {
 name: '' 
 }
 }
 render(){
 return <p></p>
 }
})

React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：

class TodoItem extends React.Component {
 static propTypes = {//类的静态属性
 name: React.PropTypes.string
 };
 static defaultProps = {//类的静态属性
 name: ''
 };
 ...
}

组件初始状态state的配置不同

React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态；

React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。

const TodoItem = React.createClass({
 // return an object
 getInitialState(){ 
 return {
 isEditing: false
 }
 }
 render(){
 return <p></p>
 }
})

class TodoItem extends React.Component{
 constructor(props){
 super(props);
 this.state = { // define this.state in constructor
 isEditing: false
 } 
 }
 render(){
 return <p></p>
 }
}

Mixins的支持不同

Mixins(混入)是面向对象编程OOP的一种实现，其作用是为了复用共有的代码，将共有的代码通过抽取为一个对象，然后通过Mixins进该对象来达到代码复用。

React.createClass在创建组件时可以使用mixins属性，以数组的形式来混合类的集合。

var SomeMixin = { 
 doSomething() {
 }
};
const Contacts = React.createClass({ 
 mixins: [SomeMixin],
 handleClick() {
 this.doSomething(); // use mixin
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

但是遗憾的是React.Component这种形式并不支持Mixins，至今React团队还没有给出一个该形式下的官方解决方案；但是React开发者社区提供一个全新的方式来取代Mixins,那就是Higher-Order Components。

如何选择哪种方式创建组件

由于React团队已经声明React.createClass最终会被React.Component的类形式所取代。但是在找到Mixins替代方案之前是不会废弃掉React.createClass形式。所以：

能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

除此之外，创建组件的形式选择还应该根据下面来决定：

1、只要有可能，尽量使用无状态组件创建形式。

2、否则（如需要state、生命周期方法、ref等），使用`React.Component`这种es6形式创建组件

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Node.js中如何合并两个复杂对象的介绍

关于react-native之ART绘图的方法

위 내용은 React에서 컴포넌트를 생성하는 세 가지 방법과 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!