react库的基础学习

React介绍

React.js是前端三大新框架：Angular.js、React.js、Vue.js之一，这三大新框架的很多理念是相同的，但是也有各自的特点。

React起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React可以作为一个js库来使用，我们在页面上引用相关的js文件，就可以使用它来做一些页面效果。

React也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)应用系统。
—脚手架

快速开始

首先通过将React作为一个js库来使用，来学习React的一些基本概念，在页面上引入已经下载好的三个js文件，就可以使用React了。

<script src="js/react.development.js">script>
<script src="js/react-dom.development.js">script>
<script src="js/babel.min.js">script>
1
2
3

其中，前两个js文件是React的核心文件，第三个js文件是一个转换编译器，它能将ES6语法及jsx语法转换成可以在浏览器中运行的代码。

编写hello world程序

<div id="root">div>
<script type="text/babel">    
    ReactDOM.render(
        <h1>Hello world!</h1>,
        document.getElementById('root')
    )   
script>
1
2
3
4
5
6
7

上面编写的，不是真正的JavaScript代码，因为上面是JavaScript代码和html的混合，所以它的类型需要写成“text/babel”，最终通过编译器编译成浏览器可以执行的js。

示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="js/react.development.js">script>
    <script src="js/react-dom.development.js">script>
    
    <script src="js/babel.min.js">script>
head>
<body>
    
    
    <div id="root">div>

    <script type="text/babel">
        // 第一个参数jsx的对象 第二个参数是对象
        ReactDOM.render(
            <h1>hello world!</h1>,
            document.getElementById('root')
        )
    script>
body>
html>
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

JSX语法

jsx语法是一种类似于html标签的语法，它的作用相当于是让我们在JavaScript代码中直接写html代码，但是jsx不完全是html，它是 JavaScrip 的一种扩展语法，它具有 JavaScript 的全部能力，我们还可在jsx代码中插入变量或者表达式，用jsx语法写出来的语句是一个对象，我们可以将它存为一个变量，这个变量作为ReactDOM对象的render方法的第一个参数。

let el = <h1>Hello world!h1>;
ReactDOM.render(
    el,
    document.getElementById('root')
)
1
2
3
4
5

jsx的结构还可以写得更复杂，可以是嵌套结构，如果是嵌套结构，需要有唯一的一个外层标签。标签中如果是单个的标签，在结尾要加“/”,在jsx中可以通过“{}”插入变量，表达式或者函数调用。

<script type="text/babel">
    let iNum01  = 10;
    let sTr = 'abc123456';
    let ok = true;
    function fnRev(s){
        return s.split('').reverse().join('');
    }    
    let el = (
        <div>
            <h3>jsx语法</h3>
            {/* 插入变量及运算 */}
            <p>{ iNum01+5 }</p>
            {/* 插入表达式 */}
            <p>{ sTr.split('').reverse().join('') }</p>
            {/* 插入函数调用 */}
            <p>{ fnRev(sTr) }</p>
            {/* 插入三元运算表达式 */}
            <p>{ ok?'YES':'NO' }</p>                
        </div>
    );

    ReactDOM.render(
        el,
        document.getElementById('root')
    )

script>
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

示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/react.development.js">script>
    <script src="js/react-dom.development.js">script>
    
    <script src="js/babel.min.js">script>
head>
<body>
    <div id="root">div>

    <script type="text/babel">
    let iNum01 = 10;

    let sTr = 'abcdefgh123456';

    let ok = false;

    let url = 'http://www.baidu.com';

    function fnRev(s){
        return s.split('').reverse().join('');
    }
    let el =(
        <div>
            <h2>jsx语法</h2>
            {/* 插入变量及运算 */}
            <p>{ iNum01+5 }</p>
            {/*插入字符串*/}
            <p>{ sTr }</p>
            {/* 插入表达式 */}
            <p>{ sTr.split('').reverse().join('') }</p>
            {/* 插入函数调用 */}
            <p>{ fnRev(sTr) }</p>
            {/* 插入三元运算表达式 */}
            <p>{ ok?'YES':'NO' }</p>
        </div>
    );

    ReactDOM.render(el,document.getElementById('root'));
    script>
body>
html>
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

jsx中指定标签的属性值建议用双引号，不能不用引号，属性名建议用驼峰式，其中class属性需要写成className，属性值如果是可变的，也可以写成“{}”的形式，里面可以和上面写法一样。标签如果是单个的，在结尾一定要加“/”

{/* 定义class */}
<p className="sty01">使用样式p>
{/* 单个标签，结尾要加“/” */}
<img src={user.avatarUrl} />
1
2
3
4

示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/react.development.js">script>
    <script src="js/react-dom.development.js">script>
    
    <script src="js/babel.min.js">script>

    <style>
        .sty01{
            font-size: 30px;
            color: red;
        }
    style>
head>
<body>
    <div id="root">div>

    <script type="text/babel">
    let url = 'http://www.baidu.com';

    let el =(
        <div>
           <a href={url} className="sty01">这是一个链接</a>
        </div>
    );

    ReactDOM.render(el,document.getElementById('root'));
    script>
body>
html>
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

组件和属性(props)

组件可以理解成是一个组成页面的部件或者零件，每个部件都有自己完整的结构和功能，多个部件拼装在一起就可以组成一个页面，从组件的实现来看，组件最终是要返回一个jsx对象，不过它和jsx对象的区别是，它在jsx对象的基础上，还带有自己的方法和属性，能完成它自己的交互功能。组件有两种定义方式：一种是函数式定义，一种是类定义。

函数式定义组件

通过函数来定义一个组件，组件名称首字母要大写，函数接收一个参数props，返回一个jsx对象。其中，name属性是在渲染组件时，通过定义属性传入进来的。

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

类方式定义组件

上面的组件可以通过下面ES6的类的方式定义，定义的类都要继承于React对象中的Component类，这个定义的组件和上面的功能是等效的。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}h1>;
  }
}
1
2
3
4
5

组件渲染

组件渲染和jsx对象一样，我们可以通过ReactDOM.render()方法来渲染组件。

function Welcome(props) {
  return <h1>Hello, {props.name}h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
1
2
3
4
5
6
7
8

组件组合

可以在一个组件内，拼装其他的组件，从而组合成一个更大的组件

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/react.development.js">script>
    <script src="js/react-dom.development.js">script>
    
    <script src="js/babel.min.js">script>
head>
<body>
    <div id="root">div>
    <script type="text/babel">

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


        //定义一个大的组件，组合上面的组件
        class WelcomeAll extends React.Component{
            render(){
                return (
                  <div>
                      <Welcome name = "Sara"/>
                      <Welcome name = "Tom" />
                      <Welcome name = "Rose" />
                  </div>
                );
            }
        }
        //this.props = {name: "Sara"}===》
         渲染小的组件
        // ReactDOM.render(,document.getElementById('root'));

        //渲染大的组件
        ReactDOM.render(<WelcomeAll />,document.getElementById('root'));
    script>
body>
html>
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

绑定事件

React绑定事件和JavaScript中的行间事件类似，事件绑定是写在标签中的，但是，React事件是在原生事件的基础上做了封装，它的事件使用驼峰命名，而不是全部小写。事件需要传递一个函数作为事件处理程序，这个函数在哪里定义呢？我们可以通过类定义组件，将这个函数作为一个方法定义在组件中。

定义一个点击能弹出名称的组件：

class Helloname extends React.Component {
   fnHello(){
       alert('Hello,Tom');
   }
   render(){
       return (
           <input type="button" value="打招呼" onClick={this.fnHello} />
       )
   }
}
ReactDOM.render(<Helloname />, document.getElementById('root'));
1
2
3
4
5
6
7
8
9
10
11

如果想把这个组件定义成可以传递名称参数的，可以定义如下：

class Helloname extends React.Component {
   fnHello(){
       alert(this.props.name);
   }
   render(){
       return (
           <input type="button" value="打招呼" onClick={this.fnHello.bind(this)} />
       )
   }
}

ReactDOM.render(<Helloname name="Tom" />, document.getElementById('root'));
1
2
3
4
5
6
7
8
9
10
11
12

需要注意的是，按钮在调用方法时，此时的this默认会指向这个按钮，所以在绑定事件时，需要绑定this，将this指向当前对象。

示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
  <script src="js/react.development.js">script>
  <script src="js/react-dom.development.js">script>
  
  <script src="js/babel.min.js">script>
head>
<body>
    <div id="root">div>
    <script type="text/babel">
        class HelloTom extends React.Component{
            //定义click事件的处理方式
            fnHello(){
                alert("Hello,Tom!");
            }

            render(){
                return(
                    <input type="button" value="打招呼" onClick={this.fnHello} />
                )
            }
        }


        //定义有参方法
        class HelloName extends React.Component{
            fnHello(){
                alert("Hello,"+this.props.name);
            }

            render(){
                return (
                    //在事件调用方法时，如果方法里面使用了this，在方法中需要绑定this
                    <input type="button" value="打招呼啊" onClick={this.fnHello.bind(this)}/>
                )
            }
        }

        //如果43行显示出来，则只会显示44行
        // ReactDOM.render(, document.getElementById('root'));
        ReactDOM.render(<HelloName name = "Jack"/>,document.getElementById('root'));
    script>
body>
html>
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

状态

组件如果需要定义默认属性呢？而且这个默认属性还是可变的呢？这个就是组件的状态属性了，状态属性默认名称是state，这个属性需要在组件定义时初始化，所以我们需要使用类的构造函数来对这个属性进行初始化。

定义一个点击按钮数字递增的

class Increase extends React.Component {
    constructor(props){
        super(props);
        this.state = {iNum:10};
        // 也可以在组件初始化时将方法绑定this
        this.fnAdd = this.fnAdd.bind(this);
    }
    fnAdd(){
        // 使用setState来改变state中的值
        this.setState(prevState=>({
            iNum:prevState.iNum+1
        }));
    }
    render(){
        return (
            <div>
                <p>{ this.state.iNum }p>
                <input type="button" onClick={this.fnAdd} value="递增" />
            div>
        );
    }
}

ReactDOM.render(
    <Increase />,
    document.getElementById('root')
);
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

state注意点
1、不能直接修改state的值，应该用setState代替

// 下面写法是不会更新组件，是错误的
this.state.iNum = 11;

// 应该写成setState的形式
this.setState({iNum: 11});
1
2
3
4
5

2、state的值可能是异步的，如果需要在state的值的基础上修改得到新的值，可以使用函数的形式，函数的参数中传递的第一个参数是state上一个状态的值，我们可以在这个值基础上修改，下面的prevState代表state上一个状态的值。

this.setState(prevState=>({
    iNum:prevState.iNum+1
}));
1
2
3

示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/react.development.js">script>
    <script src="js/react-dom.development.js">script>
    
    <script src="js/babel.min.js">script>
head>
<body>
    <div id="root">div>
    <script type="text/babel">
        <div id="root"></div>
        class Increase extends React.Component{
            constructor(props) {
                super(props);
                this.state = {iNum:10};
            }

            // 要通过setState方法来改变state里面的值
            //setState里面可以传一个对象，也可以传一个函数，函数需要返回一个对象
            fnAdd(){
            	//这样写也是可以的
                // this.state.iNum +=1;
                // this.setState({
                //     iNum:11
                // })

               /* this.setState({
                    //虽然可以这样写是可以的，但是不建议这样用
                    iNum:this.state.iNum+1
                })*/

                // prevState 指的是state最新的值
                // this.setState(function(prevState){
                //     return { iNum:prevState.iNum+1}
                // })

                //return 字典或者对象需要加()
                this.setState(prevState=>
                    ({iNum:prevState.iNum+1})
                )
            }
            render(){
                return (
                    <div>
                        <p>{this.state.iNum}</p>
                        <input type="button" value="递增" onClick={this.fnAdd.bind(this)}/>
                    </div>
                )
            }
        }

        ReactDOM.render(<Increase />, document.getElementById('root'));
    script>
body>
html>
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
55
56
57
58

选项卡案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .tab_con{
            width:500px;
            height:350px;
            margin:50px auto 0;
        }
        .tab_btns{
            height:50px;
        }
        .tab_btns input{
            width:100px;
            height:50px;
            background:#ddd;
            border:0px;
            /*去掉行间的高亮*/
            outline:none;
        }

        .tab_btns .active{
            background:gold;
        }

        .tab_cons{
            height:300px;
            background:gold;
        }

        .tab_cons div{
            height:300px;
            line-height:300px;
            text-align:center;
            display:none;
            font-size:30px;
        }

        .tab_cons .current{
            /*以块元素显示出来*/
            display:block;
        }
    style>
    <script src="js/react.development.js">script>
    <script src="js/react-dom.development.js">script>
    
    <script src="js/babel.min.js">script>
head>

<body>

    <div id="root">div>


    <script type="text/babel">
        class Tab extends React.Component{

            constructor(props) {
                super(props);
                this.state = {iNow:0}
            }

            fnChange(i){
                this.setState(
                    {
                        iNow:i
                    }
                )
            }
            // 行内元素放在一行，就会去掉间距
            render(){
                return (
                    <div className="tab_con">
                        <div className="tab_btns">
                                {/*{this.state.iNow}
*/}
                                <input type="button" value="按钮一" className={(this.state.iNow==0)?"active":''} onClick={this.fnChange.bind(this,0)}/>
                                <input type="button" value="按钮二" className={(this.state.iNow==1)?"active":''} onClick={this.fnChange.bind(this,1)}/>
                                <input type="button" value="按钮三" className={(this.state.iNow==2)?"active":''} onClick={this.fnChange.bind(this,2)} />
                        </div>
                        <div className="tab_cons">
                            <div className={(this.state.iNow==0)?"current":''}>按钮一对应的内容</div>
                            <div className={(this.state.iNow==1)?"current":''}>按钮二对应的内容</div>
                            <div className={(this.state.iNow==2)?"current":''}>按钮三对应的内容</div>
                        </div>
                    </div>
                );
            }
        }

        ReactDOM.render(<Tab />,document.getElementById("root"));
    script>
body>
html>
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

列表渲染

如何拼装数组中的数据放入页面呢？可以将数组中的数据通过数组遍历渲染成一个jsx对象，在通过React渲染这个对象就可以了。

let aList = ['红海','复联3','碟中谍6','熊出没'];

let el = aList.map((item,i)=>
    <li key={i}>{ item }li>
);

ReactDOM.render(
    <ul>{el}ul>, 
    document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10

通过map方法遍历数组中的成员，map方法的第二个参数是数组中的索引值，在循环生成li结构时，需要给每个li加上一个key，这个key的值可以用数组中的成员索引值。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/react.development.js">script>
    <script src="js/react-dom.development.js">script>
    
    <script src="js/babel.min.js">script>
head>
<body>
    <div id="root">div>
    <script type="text/babel">
        let aList = ['红海','复联三','碟中谍6','熊出没'];

        let el = aList.map((item,i)=><li key={i}>{item}</li>);
		//第二种写法
        // let el = aList.map(function (item,i){
        //     return {item}
;
        // });

        ReactDOM.render(<ul>{el}</ul>,document.getElementById('root'));
    script>
body>
html>
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

表单数据绑定—双向数据绑定

表单元件对应着数据，而且这些数据都是变化的，所以我们会将表单元件的数据对应于组件中的state属性值，让它们之间的值实现双向数据绑定的效果，要实现这个效果，需要在表单元件上绑定onchange事件，来将state中的值改变为表单元件中的值，同时也需要将表单的value属性值，设置为等于state中的属性值。

表单数据绑定示例：

class Myform extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            uname:''
        };
    }
    // ev指的是系统自动产生的事件对象
    // ev.target指的是发生事件的元素
    fnNameInput(ev){
        this.setState({
            uname:ev.target.value
        })
    }
    render(){
        return(
            <form>
                <p>用户的名称是：{ this.state.uname }p>
                <input type="text" value={this.state.uname} onChange={this.fnNameInput.bind(this)} />                                        
            form>
        );
    }
}

ReactDOM.render(
    <Myform />, 
    document.getElementById('root')
);
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

示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/react.development.js">script>
    <script src="js/react-dom.development.js">script>
    <script src="js/babel.min.js">script>
head>
<body>
    <div id="root">div>

    <script type="text/babel">
      class Inputxt extends React.Component{

            constructor(props) {
                super(props);
                this.state = {iNum:11}
            }

          // ev指的是系统自动产生的事件对象
          // ev.target指的是发生事件的元素
            fnChange(ev){
                this.setState({
                    iNum: ev.target.value
                })
            }
            render(){
                return (
                    <div>
                        <p>{ this.state.iNum }</p>
                        <input type="text" value={ this.state.iNum } onChange={this.fnChange.bind(this)}/>
                    </div>
                );
            }
      }

      ReactDOM.render(<Inputxt />,document.getElementById('root'));
    script>
body>
html>
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

todolist(计划列表)—案例

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>todolisttitle>
  <style type="text/css">
    .list_con{
      width:600px;
      margin:50px auto 0;
    }
    .inputtxt{
      width:550px;
      height:30px;
      border:1px solid #ccc;
      padding:0px;
      text-indent:10px;
    }
    .inputbtn{
      width:40px;
      height:32px;
      padding:0px;
      border:1px solid #ccc;
    }
    .list{
      margin:0;
      padding:0;
      list-style:none;
      margin-top:20px;
    }
    .list li{
      height:40px;
      line-height:40px;
      border-bottom:1px solid #ccc;
    }

    .list li span{
      float:left;
    }

    .list li a{
      float:right;
      text-decoration:none;
      margin:0 10px;
    }
  style>
  <script src="js/react.development.js">script>
  <script src="js/react-dom.development.js">script>
  <script src="js/babel.min.js">script>
head>
<body>

    <div id="root">div>

    <script type="text/babel">
      class Todolist extends React.Component{

          constructor(props) {
              super(props);
              this.state = {
                  aList:['学习html','学习css','学习javascript','学习go语言'],
                  sTodo:''
              }
          }

          //把事件的对象给ev
          fnChange(ev){
            this.setState({
                sTodo:ev.target.value
            })
          }

          fnAdd(){
              // this.setState(function (prevState){
              //     if (prevState.sTodo == ''){
              //         alert("请输入内容!");
              //         return;
              //     }
              // })

              this.setState(prevState =>{
                  // 判断是否为空
                  if (prevState.sTodo == ''){
                      alert("请输入内容!");
                      return;
                  }

                  //sTodo 输入框赋值为空
                  return {aList: [...prevState.aList,prevState.sTodo],sTodo:''}
              })
          }

          fnDel(i){
              this.setState(prevState =>{
                  //复制一份
                  let list = [...prevState.aList];

                  list.splice(i,1);
                  return {aList:list};
              })
          }

          fnUp(i){
              this.setState(prevState =>{
                  if (i==0){
                      alert('到顶了!');
                      return;
                  }
                  //复制一份
                  let list = [...prevState.aList];
                  let nowItem = list[i];
                  list.splice(i,1); //删除list[i]数据
                  // console.log(list);
                  list.splice(i-1,0,nowItem); //在list[i-1]处添加数据
                  // console.log(list);

                  return {aList:list};
              })
          }

          fnDown(i){
              this.setState(prevState =>{
                  if (i== prevState.aList.length-1){
                      alert('到底了!');
                      return;
                  }
                  //复制一份
                  let list = [...prevState.aList];
                  let nowItem = list[i];
                  list.splice(i,1); //删除list[i]数据
                  // console.log(list);
                  list.splice(i+1,0,nowItem); //在list[i+1]处添加数据
                  // console.log(list);

                  return {aList:list};
              })
          }
        render(){
          return (
                  <div className="list_con">
                    <h2>To do list</h2>
                    <input type="text" value={this.state.sTodo} id="txt1" className="inputtxt" onChange={this.fnChange.bind(this)}/>
                    <input type="button" value="增加" id="btn1" className="inputbtn" onClick= {this.fnAdd.bind(this)}/>
                    <ul id="list" className="list">
                        {
                            this.state.aList.map((item,i)=>
                                <li key={i}><span>{item}</span><a href="javascript:;"
                                className="up" onClick={this.fnUp.bind(this,i)}> ↑ </a><a href="javascript:;"
                                className="down" onClick={this.fnDown.bind(this,i)}> ↓ </a> <a href="javascript:;"
                                className="del" onClick={this.fnDel.bind(this,i)}>删除</a></li>
                            )
                        }
                    </ul>
                  </div>
          );
        }
      }

      ReactDOM.render(<Todolist />, document.getElementById('root'));
    script>
body>
html>
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

生命周期方法

生命周期方法，指的是在组件初始化后，以及组件销毁时，会自动执行的两个方法，我们可以在初始化方法中执行获取数据的操作，在组件销毁方法中执行一些清除操作，比如清除定时器等操作。这两个方法分别是：componentDidMount 和 componentWillUnmount。

使用示例：

class Hello extends React.Component{
    constructor(props){
        super(props);
        this.state = {}
    }
    // 组件初始化时自动执行的方法    
    componentDidMount() {
        console.log('componentDidMount');
    }
    // 组件销毁时自动执行的方法
    componentWillUnmount(){
        console.log('componentWillUnmount'); 
    }
    render(){
        return (
            <h1>Hello world!h1>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById('root'));

setTimeout(() => {
    ReactDOM.render(<h1>切换组件h1>,document.getElementById('root')); 
}, 2000);
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

示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/react.development.js">script>
    <script src="js/react-dom.development.js">script>
    <script src="js/babel.min.js">script>
head>
<body>
    <div id="root">div>
    <script type="text/babel">
        class HelloWorld extends React.Component{

            componentDidMount(){
                console.log('componentDidMount');
            }

            componentWillUnmount(){
                console.log('componentWillUnmount');
            }
            render(){
                return (
                    <h1>Hello World!</h1>
                )
            }
        }

        ReactDOM.render(<HelloWorld />, document.getElementById('root'));

        //组件销毁
        setTimeout(()=>{
            ReactDOM.render(<h1>Bye Bye!</h1>,document.getElementById('root'));
        },3000);
    script>
body>
html>
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

数据交互

React没有集成ajax功能，要使用ajax功能，可以使用官方推荐的axios.js库来做ajax的交互。 axios库的下载地址：https://github.com/axios/axios/releases

axios使用方法

常用参数：
1、url 请求地址
2、method 请求方式，默认是’GET’，常用的还有’POST’
3、responsetype 设置返回的数据格式，常用的是’json’格式，也可以设置为’text’或者’html’
4、params 设置发送给服务器的数据
5、then 设置请求成功后的回调函数
6、catch 设置请求失败后的回调函数

axios完整写法：

axios({
  url: '/user/12345',
  method: 'get',
  responsetype:'json',
  params: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
axios请求的写法也写成get方式后post方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

执行get请求
// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应

axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});


// 可选地，上面的请求可以这样做
axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

执行post请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
1
2
3
4
5
6
7
8
9
10

脚手架开发

脚手架开发指的是react提供了完整的自动化开发工具及规划好了开发一个应用的项目目录，这些工具是通过nodejs开发的，我们可以通过npm(nodejs包管理命令)来安装这些工具，同时可以通过这个工具生成一个应用的项目目录。

安装脚手架工具

脚手架工具是nodejs的一个包，安装这个工具之前需要先安装nodejs，然后在终端执行以下命令：

1、设置npm淘宝景象

npm config set registry https://registry.npm.taobao.org
1

2、安装

npm install -g create-react-app
1

生成应用项目目录

3、生成app

create-react-app my-app
1

4、启动

cd my-app
npm start
1
2

5、生成上线文件

npm run build
1

项目目录说明

在这里插入图片描述
以上是执行生成命令自动生成的项目目录，对应的文件夹作用如下：
目录一：src目录，主开发目录，里面包含所有项目的组件，开发组件都是基于此目录
目录二：public目录，项目入口文件目录，目录中的文件不用动
目录三：项目开发依赖包文件目录，项目安装的包都会自动安装在这个文件夹中
目录四：build目录，项目上线时，执行npm run build生成的目录，这里面是自动化工具生成的上线文件

安装axios模块

1、在终端的项目目录，执行如下命令

npm install axios
1

2、在模块文件中引入

import axios from 'axios';
1

相关阅读:
`VUE`的介绍
 关于Eslint语法检查报“error Extra semicolon semi”错误的解决办法
 计算机毕业设计springboot+vue基本微信小程序的码高教育课后在线小程序
 ArcGIS 10.7之栅格影像裁剪操作
 力扣第463题岛屿的周长 C++ 深度优先搜索 + 思维判断的边界
 深度学习模型不确定性方法对比
 GBase 8s数据库级别权限
 GoLang笔记
 举例说明自然语言处理（NLP）技术
 宝塔上的wordpress站点更换域名+配置SSL+改版百度收录
原文地址：https://blog.csdn.net/qq_40432598/article/details/133368021