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

        **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的控制台就可以看到执行的顺序了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
1/// <reference path="typings/react/react-global.d.ts" />

2

3

4

5

6interface ReactProps  {

7  elapsed : any;

8}

9

10interface ReactState {

11   list : any ;  

12}

13

14function ChangeState(): ReactState {

15  return {

16    list: []

17  };

18}

19

20

21

22class Hi extends React.Component<ReactProps,ReactState> {

23  

24  public state : ReactState ;

25  

26  constructor(props : ReactProps){

27    super(props);

28  }

29  

30  public componentWillMount(){

31    console.log('componentWillMount');

32  }

33  

34  public componentDidMount(){

35    console.log('componentDidMount');

36    this.setState(ChangeState());

37  }

38  public render(){

39    

40    console.log('render');

41        var elapsed = Math.round(this.props.elapsed  / 100);

42      return <div>{elapsed}</div>;

43  }

44}

45

46function render(){

47    ReactDOM.render(

48        <Hi elapsed = {100} />,

49        document.getElementById('container')

50    );

51}

52

53render();

54

1
2
1  

2