react+typescript学习记录_react+typescript hello world-优快云博客

本文链接：https://blog.youkuaiyun.com/love_life_forever/article/details/103795866

本文深入讲解React结合TypeScript的使用技巧，从基础的Hello World示例开始，逐步介绍元素渲染、函数与Class组件的区别，以及State与生命周期管理。通过具体代码示例，帮助读者理解如何在React应用中有效运用TypeScript，提升代码质量和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react 学习记录（typescript)

1.hello world(第一个例子)

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

2.元素渲染

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

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

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

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

3.函数组件与 class 组件

3.1 函数组件：

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

3.2 ES6 的 class来定义组件：

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

4.State & 生命周期

import * as React from 'react'
import dayjs from 'dayjs'
interface Props { }
interface State {    
    date: any
}
class HelloWorld extends React.Component<Props,State>{   
    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 (
            <div> 
                <h1>Hello, world!</h1> 
                <h2>It is { dayjs(this.state.date).format('YYYY-MM-DD HH:mm:ss') }</h2>        		  </div>
        );    }
}
export  default  HelloWorld