玩转 React 【第03期】：邂逅 React 组件

最新推荐文章于 2024-11-12 11:19:19 发布

Duanyh2016

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量91

点赞数

文章标签： javascript 前端 ui ViewUI

原文链接：http://www.cnblogs.com/Highdoudou/p/9927324.html

版权

上期回顾

前文我们讲解了 React 模板 JSX，接着我们继续来看看 React 组件又是如何工作的呢？
组件化开发到了今天已经是大家的共识，在 React 中，组件同样也是组成我们整个项目的基本单元。

react 中组件可以将UI切分成一些的独立的、可复用的部件。组件的返回值是一个需要在也页面上显示的 React 元素，也就是说 React 中组件必须有返回值。示例如下：

function Hello (props){

return (<div>

<h1>Hello world</h1>

</div);

}

整个 Hello 就是一个组件，调用的时候，我们可以直接调用 <Hello /> 就可以，另外这里要注意，组件的命名必须是首字母大写。

创建组件

在 React 中创建组件有三种方式：

1）无状态的函数式组件；

2）基于ES5 的 React.createClass;

3）基于 ES6 的 extends React.Component；

这三种方式都可以去创建一个 React 组件，但是在实际的使用过程中有什么不同呢？我们具体来看。

函数式组件

函数式组件，是为了创建纯粹的展示组件，也就是说函数式组件一旦创建了就不能修改，除非它的父级修改了才会引起它的修改，这样的好处就是性能较高，内部没有太多的东西，如 state 和声明周期，当然生命周期和state是什么我们后边再详细说，这里我们先大概了解，这俩东西主要是用来更改组件的内容，以及组件修改后的一系列处理的。

函数式组件的编写方式如下：

function Hello (props[,context]){

return (<div>

<h1>Hello {props.name}</h1>

</div);

}

ReactDOM.render(<Hello name="MiaoV" />, node)

return 中就是我们要显示在页面上的内容，props 是父组件传入的信息，context 是父祖中传入的信息，关于这两项的具体内容我们也放在下篇内容中详细的讲解。

除了上述内容之外，函数式组件还有以下几个特征：

组件不会被实例化，而是直接解析成 reactElemnt，整体渲染性能得到提升
没有实例化，自然在组件内部我们也不能使用 this
组件无法访问生命周期的方法，这个我们已经介绍过
组件没有state，只能访问 props

函数式组件由于其优良的性能，个人建议如果一个组件的内部我们不需要控制它进行改变的话，尽量还是使用函数式组件

React.createClass

React.createClass 是一种基于 ES5 的创建组件的方式。本质就是一个工厂，在 React.createClass(配置对象) 放入我们的配置对象，然后它会帮我们返回一个 React 组件，

示例如下：

let Fn = React.createClass({

render: function(){

return (

<div>

<h1 id="title">Hello React!</h1>

<h2 id={title}>Hello React!</h2>

<h2 className="box">class属性</h2>

<h2 style={ {background: 'red'} }>style属性</h2>

</div>

);

}

});

上述是 React.createClass 的使用方式，但是要注意 React.createClass 方法在React 16 之后就已经取消了，所以我们就不再讨论这个方法，直接来看 ES6 的写法。

React.Component

React ES6中，如果要声明一个类式组件，我们需要从 React.Component 继承过来，具体写法如下：

class Hello extends React.Component {

render(){

return (

<h1>hello! {this.props.name}</h1>

);

}

}

ReactDOM.render(

<Hello name = "MiaoV" />

document.querySelector('#app')

);

在使用 React.Component 的时候，有一些问题是需要我们注意的：

在 React.Component 中我们必须要定义一个 render 方法，这个方法中的返回值，就是最终我们要渲染到页面中 ReactElement 。
组件在实际调用的时候，会生成一个实例化对象，所以组件的方法中的 this 就指向这个实例化对象。
props 这个属性中存储的是我们调用时传入的属性，也是默认的第0个参数，所以组件中如果定义了 constructor，必须使用 super 继承，另外必须把第 0 个参数传入去，示例如下：
最后强调一下，组件的命名必须首字母大写。