Skip to main content

组件 & Props

函数组件与 class 组件

函数组件

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

class组件

ES6语法
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
TypeScript语法
import { Component } from "react"

type HelpProp = {}
type HelpState = {
time: Date
}
export class Help extends Component<HelpProp, HelpState> {
timer: number

constructor(prop: HelpProp) {
super(prop);
this.state = {
time: new Date()
};
}

interval() {
this.timer = window.setInterval(() => {
this.setState({
time: new Date()
});
}, 1000);
}

componentDidMount() {
this.interval();
}

render() {
const { time } = this.state;
return (
<div>{time.toLocaleString()}</div>
);
}

componentWillUnmount() {
if (this.timer) {
clearInterval(this.timer);
}
}
}

渲染组件:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
note
  1. React 会将以小写字母开头的组件视为原生 DOM 标签。例如,<div /> 代表 HTML 的 div 标签,而 <Welcome /> 则代表一个组件,并且需在作用域内使用 Welcome
  2. 组件不应该修改props