第四章 react组件
来源：互联网 发布：mac怎么开发android 编辑：程序博客网 时间：2024/05/07 01:49
在React中，创建组件的方法有三种：
1、函数定义的无状态组件
2、ES5原生方式React.createClass定义的组件
3、ES6形式的extends React.Component定义的组件
需要注意的是,原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
一、函数定义的无状态组件
在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件，这种通过多个简单然后合并成一个大组件的设计模式得到广泛应用。无状态的组件是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。
无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件，然后譬如在无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。
无状态函数组件形式上表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 arrow function的形式创建。具体格式如下：
<script type="text/babel">
function 组件名(props){
return <标签名>Hello,{props.属性名}</标签名>;
}
ReactDOM.render(<组件名 属性名="属性值"/>,挂靠的节点);
</script>
实例1:通过函数形式定义无状态函数组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数定义的无状态组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
function HelloComponent(props){
return <h1>Hello,{props.name}</h1>;
}
ReactDOM.render(<HelloComponent name="React"/>,document.getElementById("div"));
</script>
</body>
</html>
实例2: ES6 arrow function的形式创建
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数定义的无状态组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
let HelloComponent=(props) => {
return <h1>Hello,{props.name}</h1>;
}
ReactDOM.render(<HelloComponent name="React"/>,document.getElementById("div"));
</script>
</body>
</html>
无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：
1、组件不会被实例化，整体渲染性能得到提升
因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。
2、组件不能访问this对象
无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件。
3、组件无法访问生命周期的方法
因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
4、无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用。
二、使用ES5原生方式定义React.createClass组件
React.createClass是react刚开始推荐的创建组件的方式,这是ES5的原生的JavaScript来实现的React组件, 如果我们需要向组件传递参数，可以使用 this.props 对象。
下面使用React.createClass方法创建一个简单的组件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES5原生方式React.createClass定义组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
var HelloComponent=React.createClass({
render:function(){
return <h1>Hello,{this.props.name}</h1>;
}
})
ReactDOM.render(<HelloComponent name="React"/>,document.getElementById("div"));
</script>
</body>
</html>
注意,在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
下面使用React.createClass方法创建一个简单的复合组件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React.createClass定义简单复合组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1> );
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite name="百度" site=" http://www.baidu.com" />, document.getElementById('div') );
</script>
</body>
</html>
实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息，也就是说 WebSite 拥有 Name 和 Link 的实例。
三、使用ES6的extends React.Component方式定义组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES6形式的extends React.Component定义的组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
class HelloMessage extends React.Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
);
}
}
ReactDOM.render(<HelloMessage name="react"/>,document.getElementById("div"));
</script>
</body>
</html>
1、函数定义的无状态组件
2、ES5原生方式React.createClass定义的组件
3、ES6形式的extends React.Component定义的组件
需要注意的是,原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
一、函数定义的无状态组件
在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件，这种通过多个简单然后合并成一个大组件的设计模式得到广泛应用。无状态的组件是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。
无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件，然后譬如在无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。
无状态函数组件形式上表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 arrow function的形式创建。具体格式如下：
<script type="text/babel">
function 组件名(props){
return <标签名>Hello,{props.属性名}</标签名>;
}
ReactDOM.render(<组件名 属性名="属性值"/>,挂靠的节点);
</script>
实例1:通过函数形式定义无状态函数组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数定义的无状态组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
function HelloComponent(props){
return <h1>Hello,{props.name}</h1>;
}
ReactDOM.render(<HelloComponent name="React"/>,document.getElementById("div"));
</script>
</body>
</html>
实例2: ES6 arrow function的形式创建
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数定义的无状态组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
let HelloComponent=(props) => {
return <h1>Hello,{props.name}</h1>;
}
ReactDOM.render(<HelloComponent name="React"/>,document.getElementById("div"));
</script>
</body>
</html>
无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：
1、组件不会被实例化，整体渲染性能得到提升
因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。
2、组件不能访问this对象
无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件。
3、组件无法访问生命周期的方法
因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
4、无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用。
二、使用ES5原生方式定义React.createClass组件
React.createClass是react刚开始推荐的创建组件的方式,这是ES5的原生的JavaScript来实现的React组件, 如果我们需要向组件传递参数，可以使用 this.props 对象。
下面使用React.createClass方法创建一个简单的组件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES5原生方式React.createClass定义组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
var HelloComponent=React.createClass({
render:function(){
return <h1>Hello,{this.props.name}</h1>;
}
})
ReactDOM.render(<HelloComponent name="React"/>,document.getElementById("div"));
</script>
</body>
</html>
注意,在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
下面使用React.createClass方法创建一个简单的复合组件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React.createClass定义简单复合组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1> );
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite name="百度" site=" http://www.baidu.com" />, document.getElementById('div') );
</script>
</body>
</html>
实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息，也就是说 WebSite 拥有 Name 和 Link 的实例。
三、使用ES6的extends React.Component方式定义组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES6形式的extends React.Component定义的组件</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/babel">
class HelloMessage extends React.Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
);
}
}
ReactDOM.render(<HelloMessage name="react"/>,document.getElementById("div"));
</script>
</body>
</html>
0 0
- 第四章 react组件
- 第七章 React组件API
- 第四章 内建组件
- React 组件
- React组件
- react 组件
- React组件
- React 组件
- react 组件
- react组件
- react 组件
- React组件
- react---组件
- 深入浅出React之第五章：React组件的性能优化
- 第八章 React组件的生命周期
- React Native 第四天
- 第四章：组件之间的通讯
- 第四章 Android 四大应用组件
- HTTP 错误500.24
- opencv设置采集视频分辨率
- FFMPEG学习【libavcodec】：解码：帧解析
- Git小结
- 简谈高通Trustzone的实现
- 第四章 react组件
- spring 框架说明文档学习记录(2)
- node.js模块小记之--querystring
- 设置Sysctl.conf用以提高Linux的性能(最完整的sysctl.conf优化方案)
- 【Struts2】struts2学习（2） Convention“零配置”
- string rune byte 的关系
- 用API网关把API管起来
- split的正则用法
- 【Android】设置摄像头方向、打开线程与预览线程、设置参数、Camera外设按键、自动对焦与触摸对焦、拍照、人脸检测、位置管理、旋转管理、变焦、录像
