react+typescript学习记录

react 学习记录（typescript)

1.hello world(第一个例子)

import * as React from 'react'
class HelloWorld extends React.Component{   
    render():
    {   
        return 
hello World
;
    }
}
export  default  HelloWorld

2.元素渲染

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

const element = 
Hello, world
;
ReactDOM.render(element, document.getElementById('root'));

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

3.函数组件与 class 组件

​ 3.1 函数组件：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

3.2 ES6 的 class来定义组件：

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

4.State & 生命周期

import * as React from 'react'
import dayjs from 'dayjs'
interface Props { }
interface State {    
    date: any
}
class HelloWorld extends React.Component{   
    timerID: any   
    constructor(props: Props) 
    {       
        super(props);       
        this.state ={date: new Date()};
    }   
    componentDidMount() {   
        this.timerID = setInterval(   
            () => this.tick(),   
            1000        );  
    }    
    componentWillUnmount() {      
        clearInterval(this.timerID); 
    }    
    tick() {        
        this.setState({           
            date: new Date()       
        });   
    }    
    render() {       
        return (
            
 
                
Hello, world!
 
                
It is { dayjs(this.state.date).format('YYYY-MM-DD HH:mm:ss') }
        		  
        );    }
}
export  default  HelloWorld