React中有哪些类定义组件

php中世界最好的语言

发布： 2018-05-26 13:58:46

原创

1938人浏览过

这次给大家带来React中有哪些类定义组件，使用React中类定义组件的注意事项有哪些，下面就是实战案例，一起来看一下。

刚开始学习React没多久，在老师的教程里看到了类组件的使用示例，但是和资料上有些冲突，而引发了一些疑问：

类组件中到底要不要定义构造函数constructor（）？
super（）里边到底要不要传入props参数？
绑定事件到底要不要在构造函数constructor（）中进行？

查找资料，总结如下：

类组件：

定义组件可以使用函数定义组件和类定义组件（）

简单说一下函数定义组件和类定义组件的区别：

函数组件中无法使用state，也无法使用组件的生命周期方法；
函数组件都是展示性组件，接受props，渲染DOM；
函数组件中没有this，但在类组件中仍要绑定this这个琐碎的事，如：在render（）方法中要使用this.props来替换props；
类组件中可以使用局部状态state和生命周期方法。

类定义组件实例：

<span style="color: #000000">class GreetingInput extends React.Component{<br/>//构造函数<br/>    constructor(props){<br/>        super(props);//将props传入到<a href="http://www.php.cn/code/12195.html" target="_blank">构造方法</a>中<br/>        this.state={name:"Tom"};//初始化state的值<br/>        this.switchName=this.switchName.bind(this);<br/>    }<br/>//自定义的switchName方法，用作事件处理<br/>    switchName(){<br/>       if(this.state.name==="Tom"){<br/>          this.setState({name:"Jerry"});//修改state的值<br/>        }else{<br/>          this.setState({name:"Tom"});<br/>        }<br/>   } <br/>//render方法  渲染在UI上的内容<br/>   render(){<br/>      return(<br/>        <p><br/>          <h1>hello,{this.state.name}</h1><br/>          <button onclick={this.switchname}>{this.state.name==="tom"? "jerry":"tom"}</button><br/>        </p><br/>      );<br/>   }<br/>}   <br/>ReactDOM.render(<br/>  <GreetingInput/>,document.getElementById("root")<br/>);</span>

登录后复制

问题一：类组件中到底要不要定义构造函数constructor（）？

ES6中新增了类的概念，一个类必须要有constructor方法，如果在类中没有显示定义，则一个空的constructor方法会被默认添加；

一般需要在构造函数中初始化state和绑定事件，因此当需要初始化state或绑定事件时，需要显示定义constructor方法，并在constructor方法中初始化state和绑定事件

问题二：super（）里边到底要不要传入props参数？

首先说明一点，若显示声明了constructor方法，则必须要调用super，即仅当存在constructor方法时，必须调用super

又是遇到一些示例中super（）中没有传入参数props，super（）和super(props)到底该怎么使用？

React会自行将props设置在组件中的除了constructor方法的任何地方因此在组件的非constructor方法中使用props时，可不用传入，直接使用，

但当想要在constructor内使用props，则必须要将props传入super中，这样才能在constructor中访问到props，否则可以不用传入。

问题三：绑定事件到底要不要在构造函数constructor（）中进行？

前面说了一般需要在构造函数中绑定事件，但需要使用bind，如果不想调用bind，也可以使用以下方法：

1、使用箭头函数初始化方法，则上边的例子就变为：

class GreetingInput extends React.Component{//构造函数方法    
constructor(props){
        super(props);        
        this.state={name:"Tom"};
        
    }//自定义的switchName方法，用作事件处理   下边用的是属性初始化语法
    switchName=()=>{       
    if(this.state.name==="Tom"){          
    this.setState({name:"Jerry"});
        }else{          
        this.setState({name:"Tom"});
        }
   } 
//render方法  渲染在UI上的内容   
render(){      
return(        
<p>
          <h1>hello,{this.state.name}</h1>
          <button onClick={this.switchName}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
        </p>      );
   }
}   
ReactDOM.render(  <GreetingInput/>,document.getElementById("root")
);

登录后复制

函数中this指针指向函数本身，因此，在class的构造函数中，需要将事件函数绑定到本类的实例

但箭头函数里的this指针，指向其拥有者，也就是class ，因此一个简易的方式是，在类中尽可能使用箭头函数定义函数

2、在回调函数中使用箭头函数

class GreetingInput extends React.Component{//构造函数方法    
constructor(props){
        super(props);        
        this.state={name:"Tom"};
        
    }//自定义的switchName方法，用作事件处理    
    switchName(){       
    if(this.state.name==="Tom"){          
    this.setState({name:"Jerry"});
        }else{          
        this.setState({name:"Tom"});
        }
   } 
//render方法  渲染在UI上的内容   使用下边这个语法  有个问题就是每次switchName 渲染的时候都会创建一个不同的回调函数   
render(){      
return(        
<p>
          <h1>hello,{this.state.name}</h1>
          <button onClick={(e) => this.switchName(e)}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
        </p>      );
   }
}   
ReactDOM.render(  <GreetingInput/>,document.getElementById("root")
);

登录后复制

注意：当回调函数作为一个属性值传入低阶组件，上述这种方法可能会进行额外的重新渲染。

我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！