react开发入门教程第二篇---组件定义三种方式

ゝ一世哀愁。 2022-03-28 03:53 194阅读 0赞

>  *  ### 组件定义的三种方式 ###

> 创建形式如下：
> 
>  *  **无状态函数式组件**
> 
>     function App(props) {//props  Sebastian
>       return <div>Hello {props.name}</div>
>     }
>     ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)
> 
> 特点：**组件不会被实例化，整体渲染性能得到提升。组件不能访问`this`对象。组件无法访问生命周期的方法** 。**无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用。**

>  *  **React.createClass**
> 
>     `React.createClass`是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件，其形式如下：
> 
>     var App= React.createClass({
>         propTypes: {//定义传入props中的属性各种类型
>             initialValue: React.PropTypes.string
>         },
>         defaultProps: { //组件默认的props对象
>             initialValue: ''
>         },
>         getInitialState: function() {//组件相关的状态对象
>             return {
>                 text: this.props.initialValue || 'placeholder'
>             };
>         },
>         handleChange: function(e) {
>             this.setState({
>                 text: e.target.value
>             });
>         },
>         render: function() {
>             return (
>                 <div>
>                     Type something:
>                     <input onChange={this.handleChange} value={this.state.text} />
>                 </div>
>             );
>         }
>     });
> 
> **`React.createClass`，这些组件是要被实例化的，并且可以访问组件的生命周期方法。**
> 
> **`React.createClass特点：`**
> 
>  *  绑定函数方法导致不必要的性能开销，增加代码过时的可能性。
>  *  React.createClass的mixins不够自然、直观

>  *  **React.Component**
> 
> `React.Component`是以ES6的形式来创建react的组件的(react推荐当前方式)
> 
>     class App extends React.Component {
>         constructor(props) {
>             super(props);
>             this.state = {// 设置 initial state
>                 text: ''
>             };
>     
>             this.handleChange = this.handleChange.bind(this);//绑定this，否则在事件中this指向null
>         }
>     
>         handleChange(event) {
>             this.setState({
>                 text: event.target.value
>             });
>         }
>     
>         render() {
>             return (
>                 <div>
>                     <input onChange={this.handleChange} value={this.state.text} />
>                 </div>
>             );
>         }
>     }

>  *  ** React.createClass与React.Component区别**
> 
> 1.this
> 
> `React.createClass`创建的组件，直接使用`this.method`即可.
> 
> `React.Component`创建的组件，this不能获取当前组件实例对象，(可以在调用时使用`method.bind(this)`来完成绑定.)
> 
> 2.组件属性类型propTypes及其默认props属性defaultProps配置不同
> 
> `React.createClass：`作为**组件实例的属性**
> 
> `React.Component：`作为**组件类的属性**，所谓的**类的静态属性**。
> 
> 3.组件初始状态state的配置不同
> 
> `React.createClass`其状态state是通过`getInitialState`方法来配置组件相关的状态；  
> `React.Component`其状态state是在`constructor`中像初始化组件属性一样声明的。
> 
> **      无状态组件内部是可以使用`ref`功能的，可以将ref内容保存到无状态组件内部的一个本地变量中。**