local one let date render pre tel sta clas
- //定义组件有两种方式,函数和类
- function Welcome(props) {
- return < h1 > Hello,
- {
- props.name
- } < /h1>;
- }
- class Welcome extends React.Component{
- render(){
- return <h1>Hello, {this.props.name}</h1 > ;
- }
- }
- ReactDOM.render( < Welcome name = "kevin" / >, document.getElementById(‘root‘));
- //函数和类都可以定义组件,组件的props是只读的,不管你的组件是通过函数还是类声明的;用类声明组件的最大好处是可以设置组件的状态,通过更新组件的状态从而达到更新组件UI的目的。而函数声明的组件则没有这个功能。
- class Welcome extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- date: new Date()
- }
- }
- componentDidMount() {
- setInterval(() = >this.tick(), 1000)
- }
- tick() {
- this.setState({
- date: new Date()
- })
- }
- render() {
- return ( < h1 > Hello, {
- this.props.name
- } < span > now: {
- this.state.date.toLocaleTimeString()
- } < /span>
- </h1 > )
- }
- }
- ReactDOM.render( < Welcome name = "kevin " / >, document.getElementById(‘example‘));
react学习笔记1之声明组件的两种方式
local one let date render pre tel sta clas
原文:http://www.cnblogs.com/toward-the-sun/p/7845031.html
来源: http://www.bubuko.com/infodetail-2397109.html