组件
1、什么是组件
组件使你可以将UI划分为一个一个独立，可复用的小件，并且可以对每个部位进行单独的设计
从定义上来说，组件就像js的函数，封装内容，打到重用的目的
组件可以接受任意输入（称“props”），并返回react元素，用以描述屏幕显示内容
2、为什么使用组件
封装
将页面上可以重复的部分进行封装
重复
封装好的组件在使用的时候，直接使用标签名称进行调用
3、如何使用组件
1、组件的名称，首字母必须大写
2、一个组件只能有一个根元素
4、组件的创建方式
1、函数式组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<!--
组件：组成的部件,可以接受任何props输入,并返回元素
-->
<script type="text/babel">
// 1. 创建一个基本的组件
function Welcome(){
return (
<div>
<p>哈哈</p>
</div>
)
}
// 2. 组件的使用
ReactDOM.render(
<Welcome></Welcome>,
document.getElementById('root')
);
</script>2、类组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<!--
组件：组成的部件,可以接受任何props输入,并返回元素
-->
<script type="text/babel">
// 1. 创建一个基本的组件
class Welcome extends React.Component{
render (){
return (
<div>
<p>哈哈</p>
</div>
)
}
}
// 2. 组件的使用
ReactDOM.render(
<Welcome></Welcome>,
document.getElementById('root')
);
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
class Toggle extends React.Component {
constructor(props) {
super(props);
// 设置状态
this.state = {isToggleOn: true};
// 这个绑定是必要的，使`this`在回调中起作用
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
</script>