什么是组件
在Vue中，一个构造选项就可以表示一个组件，构造选项（有data，methods等等），而在React中，一个返回React的元素的函数就是组件
元素与组件
React中什么是元素：
const div = <div><div>
React组件：
const Div =() => <div><div>
有何不同：
- 元素一般首字母小写，而组件首字母大写
- 元素是直接把div标签赋值给div，而组件返回一个东西（函数或者箭头函数）
React的两种组件
函数组件
function Demo(props){
return <div>hello lucidity{props.name}</div>
}
如何使用：
<Demo name = "jack"/>
类组件
class Demo extends React.Component{
render() {
return <div>hello lucidity{this.props.name}</div>
}
}
如何使用：
<Demo name = "jack"/>
结合两种组件写一个demo：
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
.father {
background: red;
height: 100px;
}
.son{
background-color: blue;
height: 50px;
}
.grandson {
background-color: aliceblue;
height: 20px;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script type="text/babel">
function Father(){
return <div className= "father">爸爸
<Son />
</div>
}
class Son extends React.Component{
render(){
return <div className="son">儿子
<Grandson />
</div>
}
}
function Grandson(){
return <div className="grandson">孙子</div>
}
ReactDOM.render(<Father />,document.getElementById('app'))
</script>
</body>
</html>
效果图如下
在上面的栗子中，father组件和grandson组件用的是函数组件，而son组件用的是类组件，两种可以混用，不过我自己感觉应该：要么用函数组件，要么用类组件，两种一起用容易搞混
React组件使用props（外部数据）
React的props和Vue的props类似
函数组件： 直接读取属性-----props.xxx
类组件 ： 直接读取参数------this.props.xxx
结合上面的代码写一下props
function Father(){
return <div className= "father">爸爸
<Son demo="hello"/>
</div>
}
class Son extends React.Component{
render(){
return <div className="son">儿子: {this.props.demo}
<Grandson demo1 = "lucidity" />
</div>
}
}
function Grandson(props){
return <div className="grandson">孙子: {props.demo1}</div>
}
ReactDOM.render(<Father />,document.getElementById('app'))
效果为：
看上面的代码：father传给sondemo="hello"，son是类组件，所以用this.props.demo来接收；son传给grandsondemo1 = "lucidity"，grandson是函数组件，所以用props.demo1来接收
注意：demo="hello"，如果demo 等于一个变量xxx，那么 应该这样写：demo={xxx}
注意！！！！
React中的组件不允许改变外部数据props
React组件使用state(内部数据)
React中的state类似于Vue的data
类组件中如何使用state
用类组件实现点击button+1的效果
<script type="text/babel">
let n= 0
class Demo extends React.Component{
constructor(){
super();
this.state = {
n: 0
}
}
add() {
this.setState((state)=>{
return {n: state.n+1}
})
}
render(){
return <div>{this.state.n}
<button onClick={()=>this.add()}>点我+1</button>
</div>
}
}
ReactDOM.render(<Demo />,document.getElementById('app'))
</script>
在类组件中，初始化数据要加constructor：
constructor(){
super();
this.state = {
n: 0
}
}
读取数据用：{this.state.n}
写数据要用：this.setState，add()是一个函数，然后在button里面通过onClick调用这个函数
类组件的注意事项
- 在
add()函数中使用this.state.n+=1，看不到变化？不，其实n已经改变了，只不过UI不会自动更新，调用setState才会触发更新（异步更新），因为React没有像Vue监听data一样监听state -
setState之后，state不会立马变化，此时读state会失败，推荐使用setState()里面写个函数
函数组件中如何使用state
用函数组件实现点击button+1的效果
const Demo = ()=>{
const [n, setN] = React.useState(0)
return <div>{n}
<button onClick={() => setN(n+1)}>点我+1</button>
</div>
}
ReactDOM.render(<Demo />,document.getElementById('app'))
函数组件倒是简单的多，首先声明一个数组const [n, setN] = React.useState()，这个数组只有两个参数，n可以读，setN可以写，在React.useState()的括号中写初始值，点击button就执行setN(n+1)
总结
从上面的栗子看，明显可以感觉到实现一样的效果，类组件比函数组件较麻烦，所以，推荐使用函数组件
