致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第五节
React组件
- 函数式组件:函数内部不需要再有函数,静态组件
- 类组件:动态组件,一般会有动态交互。类能实现的,函数不一定能实现
- 复合组件:组件中又有其他的组件,复合组件里既可以有类组件,又可以有函数组件
函数式组件与类组件的区别和使用
函数式比较简单,一般用于静态没有交互事件内容的组件页面
类组件,一般又称为动态组件,一般会有交互或者数据修改的操作
本节代码
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
//函数式组件
function Children(props) {
let title = <h2>副标题</h2>
let weather = props.weather
let isGo = weather == 'rainy' ? "NO" : "YES"
console.log(props);
return (
<div>
<h1>函数式组件 Hello world!</h1>
{title}
<div>
是否出门?
<span>{isGo}</span>
</div>
</div>
)
}
//类组件定义
class HelloWorld extends React.Component {
render() {
console.log(this);
return (
<div>
<h1>类组件</h1>
<h2>Hello {this.props.name}</h2>
<Children weather={this.props.weather} />
</div>
)
}
}
ReactDOM.render(
// <Children weather="sunny" />
<HelloWorld name="react" weather="rainy" />
,
document.getElementById("root")
)