React with TypeScript 系列(二) --基础篇

本文是React with TypeScript系列的第二部分,介绍了JSX的基本使用,包括其优点和注意事项,如将HTML语法融入JavaScript,以及在使用TypeScript时的挑战。接着讲解了Props和State的概念,以及在TypeScript中如何定义它们。最后提到了React组件的生命周期,特别是当State变化时如何触发重新渲染。

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

编者语:新年了,2016年又是一个新的开始。      

       今天和大家说说React的一些基础。

        1. JSX 
        这是一个把XML混在JavaScript 的一种方式。Facebook相信这种方式令标签语言和JS代码更佳紧凑。在React构件页面时,是以组件(Component)的方式存在的, 通过组件构件的页面元素就是通过JSX的方式完成。在React中你不一定要用JSX,但是这是令人痛苦的决定。因为每一个页面元素都必须通过React.createElement的方式创建,而JSX就更像嵌入HTML语言,很方便。  
        举个例子吧,如果我们需要构建一个这样的页面,使用JSX会更方便,而且和写HTML基本一致的。
           

        需要注意的地方
        a. 建议大家在写JSX时先把基本效果在纯净态页面下写好,这样会事半功倍

        b. 引入页面css的class时,class是JSX的保留字段,所以class的名字是className.

        c. 结合TypeScript写JSX时,暂时没有智能提示和相应的插件,这个比较头痛的,但习惯了就好
        2. Props 和 State

         State  - 页面发生交互时,会产生数据的变化,这个时候就需要State去更新页面的组件。

         Props - 简单来说就是渲染页面动态数据的。例如绑定动态内容等。

         在TypeScript中如何实现呢?这里必须要看看react.d.ts。
         

         这里就可以看到,当我们使用React.Component时必须要把你的Props和State定义好带进去。我一般定义的习惯如下:
         
         注意事项
         a. 如上图,你构建的Order组件,必须是tsx为后序,否则你是不可能用TS编译它,

         b. 在构造函数中需要带上以Props相关的参数,而State是不需要的

         3. 运行周期

         你必须熟悉React的生命周期,如下图:
         
       这里要切记,你的State变化后必须在componentDidMount方法,也只有在这个方法里触发Re-render,大家可以参照下面的方法做一个测试,在Chrome的控制台就可以看到执行的顺序了。

/// <reference path="typings/react/react-global.d.ts" />




interface ReactProps  {
  elapsed : any;
}

interface ReactState {
   list : any ;  
}

function ChangeState(): ReactState {
  return {
    list: []
  };
}



class Hi extends React.Component<ReactProps,ReactState> {
  
  public state : ReactState ;
  
  constructor(props : ReactProps){
    super(props);
  }
  
  public componentWillMount(){
    console.log('componentWillMount');
  }
  
  public componentDidMount(){
    console.log('componentDidMount');
    this.setState(ChangeState());
  }
  public render(){
    
    console.log('render');
        var elapsed = Math.round(this.props.elapsed  / 100);
      return <div>{elapsed}</div>;
  }
}

function render(){
    ReactDOM.render(
        <Hi elapsed = {100} />,
        document.getElementById('container')
    );
}

render();
           今天就说到这里,如果大家有问题,可以留言给我。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值