react学习笔记 item3 --- 组件的创建方式

    xiaoxiao2021-12-10  8

    前面我们说到了 react 的核心在于组件,可以把实现一定功能或者模块进行封装,然后通过不同的组件之间的组合构成一下完整的项目。下面介绍了一下组件的基本使用方法。

    不使用JSX 语法也能创建 react 组件,但是由于react 团队推荐我们使用 JSX, 我的上一篇博文中也介绍了 JSX 的优势以及基本的语法。因此这里我简单的介绍一下使用JSX来创建组件的方法。

    1、React.createClass

    利用React.createClass定义的组件是es5原生方式。需要注意的是:

    原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头;

    组件类只能包含一个顶层标签,否则也会报错;

    对自定义组件实例化时,要保证标签闭合。

    下面我们创建一个 HelloMessage 组件,用来展示相关的信息,其形式如下:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个react程序</title> <script type="text/javascript" src="lib/react.js"></script> <script type="text/javascript" src="lib/react-dom.js"></script> <script type="text/javascript" src="lib/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello World!</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById("example")); </script> </body> </html>

    这个示例在上一篇文章中介绍过。在组件实例化的时候也可以给组件传入参数:可以使用 this.props 对象向组件传递参数。例如我们我们给组件传入一个name属性:

    var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}!</h1>; } }); ReactDOM.render( <HelloMessage name='sean' />, document.getElementById("example"));

    另外,这种方法创建的组件时可以设置状态,可以通过组件的状态来控制组件的显示效果。如下,我们设置了一个button ,通过点击 button 来实现颜色的变化:

    var HelloMessage = React.createClass({ getInitialState: function() { return { isRed : true }; }, handleClick: function(){ this.setState({isRed : !this.state.isRed}); }, render: function() { var redStyle = { color:'red' }; var blueStyle = { color:'blue' }; return ( <div> <h1 style={this.state.isRed ? redStyle : blueStyle}>Hello {this.props.name}!</h1> <button onClick={this.handleClick}>点击切换颜色</button> </div> ); } }); ReactDOM.render( <HelloMessage name='sean' />, document.getElementById("example"));

    更多的关于props 和 state 的使用将在后续的文章介绍。

    2、函数式组件

    函数式组件是React 0.14版本开始出现的,这中方式创建组件的最大特点就是无状态性。而且简化了很多,只留下了return 部分,这种组件只负责展示,不涉及到要state状态的操作。下面就是一个简单的展示:

    function HelloMessage(props){ var redStyle = { color:'red' }; return <h1 style={redStyle}>Hello world!</h1> } ReactDOM.render( <HelloMessage />, document.getElementById("example"));

    当然,函数式组件可以根据传入的props来进行相应的内容,如下:

    function HelloMessage(props){ return <h1>Hello {props.name}!</h1> } ReactDOM.render( <HelloMessage name='sean' />, document.getElementById("example"));

    这种方法创建的组件无法完成第一种 React.createClass 创建方式中根据状态改变显示效果。但是由于无状态组件,所以无状态组件就不会在有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。

    3、React.Component

    React.Component是以ES6的形式来创建react的组件的,是React目前极为推荐的创建有状态组件的方式。由于ES6 的推广,最终React.Component会取代React.createClass形式。将上面React.createClass的形式改为React.Component形式如下:

    class HelloMessage extends React.Component { constructor(props) { super(props); this.state = { isRed : true }; // ES6 类中函数必须手动绑定 this.handleClick = this.handleClick.bind(this); } handleClick(event) { this.setState({isRed : !this.state.isRed}); } render() { var redStyle = { color:'red' }; var blueStyle = { color:'blue' }; return ( <div> <h1 style={this.state.isRed ? redStyle : blueStyle}>Hello {this.props.name}!</h1> <button onClick={this.handleClick}>点击切换颜色</button> </div> ); } } ReactDOM.render( <HelloMessage name='sean' />, document.getElementById("example"));

    以上是三种创建react 组件的方式,熟悉ES6 的读者建议使用 ES6 的方式来创建。

    转载请注明原文地址: https://ju.6miu.com/read-700305.html

    最新回复(0)