React系统学习：从基础语法到虚拟DOM

📝 本文基于作者学习笔记，系统整理了 React 基础知识，适合前端开发者入门参考。

react是facebook开源的，为什么高效的原因，是因为使用了虚拟dom技术，可以很大程度的复用。

1.基本语法#

helloWorld，babel的引入是为了将jsx转换为js，使用jsx可以更快的创建虚拟dom。

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <title>hello_react</title>
7
</head>
8

9
<body>
10
    <div id="test"></div>
11
    <!-- 先引入核心库、扩展库、babel库 -->
12
    <script type="text/javascript" src="../js/react.development.js"></script>
13
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
14
    <script type="text/javascript" src="../js/babel.min.js"></script>
15
    <script type="text/babel">
16
        const VDOM = <h1>hello,React</h1>
17
        ReactDOM.render(VDOM,document.getElementById('test')) /*此处不写引号，不是字符串*/
18
    </script>
19
</body>
20

21
</html>

JSX的基本语法：

定义虚拟DOM时，不要写引号

标签中混入JS表达式要用{}，注意用const xxx=可以接收的才叫表达式

样式的类名指定不要用class，要用className

内联样式，要用style={{key}}形式

只有一个根标签

标签必须闭合

标签首字母：（1）若小写字母开头，则把标签转化为html同名元素，若没有对应同名元素则报错（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义则报错。

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <title>hello_react</title>
7
</head>
8
<style>
9
    .title {
10
        font-size: large;
11
        color: blue;
12
    }
13
</style>
14

15
<body>
16
    <div id="test"></div>
17
    <!-- 先引入核心库、扩展库、babel库 -->
18
    <script type="text/javascript" src="../js/react.development.js"></script>
19
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
20
    <script type="text/javascript" src="../js/babel.min.js"></script>
21
    <script type="text/babel">
22
        const title = 'title'
23
        const VDOM = (
24
            <div>
25
                <h1 className={title} style={{ color: 'red' }}>
26
                    <span>hello,React</span>
27
                </h1>
28
                <Good></Good>
29
            </div>
30

31
        )
32
        ReactDOM.render(VDOM, document.getElementById('test')) /*此处不写引号，不是字符串*/
33
    </script>
34
</body>
35

36
</html>

2.面向组件编程#

js的模块化只是拆分html，而组件编程则是html、css、js、img、video等整合起来是一个组件，优点是复用编码，提高效率。

2.1函数式组件#

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>hello_react</title>
6
  </head>
7
  <style>
8
    .title {
9
      font-size: large;
10
      color: blue;
11
    }
12
  </style>
13

14
  <body>
15
    <div id="test"></div>
16
    <!-- 先引入核心库、扩展库、babel库 -->
17
    <script type="text/javascript" src="../js/react.development.js"></script>
18
    <script
19
      type="text/javascript"
20
      src="../js/react-dom.development.js"
21
    ></script>
22
    <script type="text/javascript" src="../js/babel.min.js"></script>
23
    <script type="text/babel">
24
      function Demo() {
25
        return <h1>我是一个函数式组件（适用于简单的自定义）</h1>;
26
      }
27
      ReactDOM.render(<Demo />, document.getElementById("test"));
28
    </script>
29
  </body>
30
</html>

2.2类式组件#

2.2.1类的初识#

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>hello_react</title>
6
  </head>
7
  <style>
8
    .title {
9
      font-size: large;
10
      color: blue;
11
    }
12
  </style>
13

14
  <body>
15
    <div id="test"></div>
16
    <!-- 先引入核心库、扩展库、babel库 -->
17
    <script type="text/javascript" src="../js/react.development.js"></script>
18
    <script
19
      type="text/javascript"
20
      src="../js/react-dom.development.js"
21
    ></script>
22
    <script type="text/javascript" src="../js/babel.min.js"></script>
23
    <script type="text/babel">
24
      // 创建一个Person类
25
      class Perseon {
26
        // 构造器方法
27
        constructor(name, age) {
28
          this.name = name;
29
          this.age = age;
30
        }
31
        // 一般方法
32
        speak() {
33
          // speak方法在类的原型对象上，供实例使用
34
          // 通过Person实例调用speak时,speak中的this就是Person实例
35
          console.log(`我叫${this.name},我已经${this.age}了`);
36
        }
37
      }
38

39
      class Student extends Perseon {
40
        constructor(name, age, grade) {
41
          // 子类使用构造器一定要使用super且必须在前面
42
          super(name, age);
43
          this.grade = grade;
44
        }
45
        // 重写父类继承的方法
46
        speak(name,age,grade){
47
          console.log(`我叫${this.name},我已经${this.age}了,在读${this.grade}`);
48
        }
49
      }
50
      const mm = new Perseon("小满", 10);
51
      console.log(mm);
52
      mm.speak();
53
      //   call可以更改函数里的this指向
54
      mm.speak.call({ name: "didi", age: 8 });
55

56
      const ls = new Student("李四", "18", "大一");
57
      ls.speak();
58
    </script>
59
  </body>
60
</html>

2.2.2使用#

React解析组件标签时，发现组件是使用类定义的，会new出该类实例，并通过该实例调用到原型上的render

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>hello_react</title>
6
  </head>
7
  <style>
8
    .title {
9
      font-size: large;
10
      color: blue;
11
    }
12
  </style>
13

14
  <body>
15
    <div id="test"></div>
16
    <!-- 先引入核心库、扩展库、babel库 -->
17
    <script type="text/javascript" src="../js/react.development.js"></script>
18
    <script
19
      type="text/javascript"
20
      src="../js/react-dom.development.js"
21
    ></script>
22
    <script type="text/javascript" src="../js/babel.min.js"></script>
23
    <script type="text/babel">
24
      class MyComponent extends React.Component{
25
        render(){
26
            return '我是一个类式组件'
27
        }
28
      }
29

30
      ReactDOM.render(<MyComponent/>,document.getElementById('test'))
31
    </script>
32
  </body>
33
</html>

3.State状态#

借助构造器初始化状态并使用，通过点击事件修改状态。

3.1标准写法（强制绑定）#

下面是标准写法，借助构造器的this对state进行初始化

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>hello_react</title>
6
  </head>
7
  <style>
8
    .title {
9
      font-size: large;
10
      color: blue;
11
    }
12
  </style>
13

14
  <body>
15
    <div id="test"></div>
16
    <!-- 先引入核心库、扩展库、babel库 -->
17
    <script type="text/javascript" src="../js/react.development.js"></script>
18
    <script
19
      type="text/javascript"
20
      src="../js/react-dom.development.js"
21
    ></script>
22
    <script type="text/javascript" src="../js/babel.min.js"></script>
23
    <script type="text/babel">
24
      class Weather extends React.Component {
25
        constructor(props) {
26
          super(props);
27
          //   初始化状态
28
          this.state = { isHot: true, wind: "微风" };
29
          //   解决changeWeather中指向问题
30
          this.changeWeather = this.changeWeather.bind(this);
31
        }
32
        render() {
33
          const { isHot, wind } = this.state;
34
          return (
35
            <h1 onClick={this.changeWeather}>
36
              今天天气{isHot ? "炎热" : "凉爽"}，{wind}
37
            </h1>
38
          );
39
        }
40

41
        changeWeather() {
42
          const isHot = this.state.isHot;
43
          this.setState({ isHot: !isHot });
44
          console.log("修改天气：", this.state.isHot);
45
        }
46
      }
47

48
      ReactDOM.render(<Weather />, document.getElementById("test"));
49
    </script>
50
  </body>
51
</html>

3.2简化写法（箭头函数）#

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>hello_react</title>
6
  </head>
7
  <style>
8
    .title {
9
      font-size: large;
10
      color: blue;
11
    }
12
  </style>
13

14
  <body>
15
    <div id="test"></div>
16
    <!-- 先引入核心库、扩展库、babel库 -->
17
    <script type="text/javascript" src="../js/react.development.js"></script>
18
    <script
19
      type="text/javascript"
20
      src="../js/react-dom.development.js"
21
    ></script>
22
    <script type="text/javascript" src="../js/babel.min.js"></script>
23
    <script type="text/babel">
24
      class Weather extends React.Component {
25
        // 自定义状态
26
        state = { isHot: true, wind: "微风" };
27
        render() {
28
          const { isHot, wind } = this.state;
29
          return (
30
            <h1 onClick={this.changeWeather}>
31
              今天天气{isHot ? "炎热" : "凉爽"}，{wind}
32
            </h1>
33
          );
34
        }
35

36
        // 自定义方法——用赋值语句+箭头函数的形式
37
        changeWeather = () => {
38
          console.log(this);
39
          const isHot = this.state.isHot;
40
          this.setState({ isHot: !isHot });
41
          console.log("修改天气：", this.state.isHot);
42
        };
43
      }
44

45
      ReactDOM.render(<Weather />, document.getElementById("test"));
46
    </script>
47
  </body>
48
</html>

4.props多种属性#

三点运算符…表示展开，是对于一个数组。

4.1基本使用#

1
{...Person}在原生es6语法中，表示克隆一个对象
2
{...Person,name:'jack'}表示克隆一个对象并替换

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>hello_react</title>
6
  </head>
7
  <body>
8
    <div id="test1"></div>
9
    <div id="test2"></div>
10
    <div id="test3"></div>
11
    <!-- 先引入核心库、扩展库、babel库 -->
12
    <script type="text/javascript" src="../js/react.development.js"></script>
13
    <script
14
      type="text/javascript"
15
      src="../js/react-dom.development.js"
16
    ></script>
17
    <script type="text/javascript" src="../js/babel.min.js"></script>
18
    <script type="text/babel">
19
      class Weather extends React.Component {
20
        render() {
21
          const { area, day, weather } = this.props;
22
          return (
23
            <ul>
24
              <li>{area}</li>
25
              <li>{day}</li>
26
              <li>{weather}</li>
27
            </ul>
28
          );
29
        }
30
      }
31

32
      const p = { area: "福州", day: "11月25日", weather: "晴" };
33
    //这里不是表示克隆而是展开p，因为react+babel，原生会报错，而且只有标签属性可以
34
      ReactDOM.render(<Weather {...p} />, document.getElementById("test1"));
35

36
      ReactDOM.render(
37
        <Weather area="泉州" day="11月25日" weather="阴" />,
38
        document.getElementById("test2")
39
      );
40

41
      ReactDOM.render(
42
        <Weather area="厦门" day="11月25日" weather="大风" />,
43
        document.getElementById("test3")
44
      );
45
    </script>
46
  </body>
47
</html>

4.2标签属性限制#

1
      Person.propTypes = {
2
        name: PropTypes.string.isRequired,//限制name必传，且为字符串
3
        sex: PropTypes.string,//限制sex为字符串
4
        age: PropTypes.number,//限制age为数值
5
        speak:PropTypes.func//限制speak为函数
6
      };
7

8
      Person.defaultProps = {
9
        sex: "保密",//sex默认值保密
10
      };

4.3简写#

1
      class Person extends React.Component {
2
        static propTypes = {
3
          name: PropTypes.string.isRequired, //限制name必传，且为字符串
4
          sex: PropTypes.string, //限制sex为字符串
5
          age: PropTypes.number, //限制age为数值
6
          speak: PropTypes.func, //限制speak为函数
7
        };
8

9
        static defaultProps = {
10
          sex: "保密", //sex默认值保密
11
        };
12
        render() {
13
          const { name, sex, age } = this.props;
14
          return (
15
            <ul>
16
              <li>{name}</li>
17
              <li>{sex}</li>
18
              <li>{age + 1}</li>
19
            </ul>
20
          );
21
        }
22
      }

5.refs#

在 React 中，refs 是用来访问和操作 DOM 元素或组件实例的一种方式。通过 refs，开发者可以直接与 DOM 进行交互，而无需依赖 React 的状态管理和生命周期方法。

5.1字符串形式#

1
 class Demo extends React.Component {
2
        showData = () => {
3
          console.log(this);
4
          const {input1} = this.refs
5
          console.log(input1.value);
6
        };
7
        render() {
8
          return (
9
            <div>
10
              <input ref="input1" type="text" placeholder="点击按钮提示数据" />
11
              &nbsp;
12
              <button onClick={this.showData}>获取数据</button>&nbsp;
13
              <input id="input2" placeholder="失去焦点提示数据" />
14
            </div>
15
          );
16
        }
17
      }
18

19
      ReactDOM.render(<Demo />, document.getElementById("test1"));

5.2回调函数形式#

1
<script type="text/babel">
2
      class Demo extends React.Component {
3
        showData = () => {
4
          const { input1 } = this.refs;
5
          console.log(this.input1.value);
6
        };
7
        render() {
8
          return (
9
            <div>
10
              <input
11
                ref={(c) => (this.input1 = c)}
12
                type="text"
13
                placeholder="点击按钮提示数据"
14
              />
15
              &nbsp;
16
              <button onClick={this.showData}>获取数据</button>&nbsp;
17
            </div>
18
          );
19
        }
20
      }
21
      ReactDOM.render(<Demo />, document.getElementById("test1"));
22
</script>

5.3createRef形式#

1
 myRef1 = React.createRef();
2

3
<input
4
  ref={this.myRef1}
5
  type="text"
6
  placeholder="点击按钮提示数据"
7
/>

1
<script type="text/babel">
2
      class Demo extends React.Component {
3
        state = { isHot: true };
4
        myRef1 = React.createRef();
5
        myRef2 = React.createRef();
6

7
        showData = () => {
8
          console.log(this.myRef1.current.value);
9
        };
10

11
        showData2 = () => {
12
          alert(this.myRef2.current.value);
13
        };
14

15
        changeWeather = () => {
16
          const { isHot } = this.state;
17
          this.setState({ isHot: !isHot });
18
        };
19
        render() {
20
          const { isHot } = this.state;
21

22
          return (
23
            <div>
24
              <h1>今天天气很{isHot ? "炎热" : "凉爽"}</h1>
25
              <input
26
                ref={this.myRef1}
27
                type="text"
28
                placeholder="点击按钮提示数据"
29
              />
30
              &nbsp;
31
              <button onClick={this.showData}>获取数据</button>
32
              &nbsp;
33
              <button onClick={this.changeWeather}>点击切换天气</button>&nbsp;
34
              <input
35
                onBlur={this.showData2}
36
                ref={this.myRef2}
37
                type="text"
38
                placeholder="失去焦点提示数据"
39
              />
40
              &nbsp;
41
            </div>
42
          );
43
        }
44
      }
45
      ReactDOM.render(<Demo />, document.getElementById("test1"));
46
    </script>

6.react中的事件处理#

不要过度使用ref，如果发生事件的元素就是你要操作的元素的时候就可以不适用ref。

1
//使用ref的版本
2
showData2 = () => {
3
  alert(this.myRef2.current.value);
4
};
5

6
<input nBlur={this.showData2}
7
       ref={this.myRef2}
8
       type="text"
9
       placeholder="失去焦点提示数据"
10
/>
11

12
//不使用ref的版本
13
showData2 = (event) => {
14
  alert(event.target.value);
15
};
16

17
<input nBlur={this.showData2}
18
       type="text"
19
       placeholder="失去焦点提示数据"
20
/>

7.react中收集表单数据#

优先使用受控组件，因为使用非受控组件需要使用ref

7.1非受控组件#

现用现取属于非受控

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>hello_react</title>
6
  </head>
7
  <body>
8
    <div id="test1"></div>
9
    <div id="test2"></div>
10
    <div id="test3"></div>
11
    <!-- 先引入核心库、扩展库、babel库 -->
12
    <script type="text/javascript" src="../js/react.development.js"></script>
13
    <script
14
      type="text/javascript"
15
      src="../js/react-dom.development.js"
16
    ></script>
17
    <script type="text/javascript" src="../js/babel.min.js"></script>
18
    <script type="text/javascript" src="../js/prop-types.js"></script>
19
    <script type="text/babel">
20
      class Login extends React.Component {
21
        handleSubmit = (event) => {
22
          event.preventDefault();
23
          const { username, password } = this;
24
          alert(`你输入的用户名是${username.value}，密码是${password.value}`);
25
        };
26
        render() {
27
          return (
28
            <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
29
              用户名：
30
              <input
31
                type="text"
32
                ref={(c) => (this.username = c)}
33
                name="username"
34
              />
35
              密码：
36
              <input
37
                type="password"
38
                ref={(c) => (this.password = c)}
39
                name="password"
40
              />
41
              <button>登陆</button>
42
            </form>
43
          );
44
        }
45
      }
46
      ReactDOM.render(<Login />, document.getElementById("test1"));
47
    </script>
48
  </body>
49
</html>

7.2受控组件#

页面中所有输入类的dom，随着输入可以维护到状态中，需要使用的时候通过状态中读取。

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>hello_react</title>
6
  </head>
7
  <body>
8
    <div id="test1"></div>
9
    <div id="test2"></div>
10
    <div id="test3"></div>
11
    <!-- 先引入核心库、扩展库、babel库 -->
12
    <script type="text/javascript" src="../js/react.development.js"></script>
13
    <script
14
      type="text/javascript"
15
      src="../js/react-dom.development.js"
16
    ></script>
17
    <script type="text/javascript" src="../js/babel.min.js"></script>
18
    <script type="text/javascript" src="../js/prop-types.js"></script>
19
    <script type="text/babel">
20
      class Login extends React.Component {
21
        // 初始化状态
22
        state = {
23
          username: "", //用户名
24
          password: "", //密码
25
        };
26
        handleSubmit = (event) => {
27
          event.preventDefault(); //阻止表单提交
28
          const { username, password } = this.state;
29
          alert(`你输入的用户名是${username}，密码是${password}`);
30
        };
31

32
        saveUsername = (event) => {
33
          this.setState({ username: event.target.value });
34
        };
35

36
        savePassword = (event) => {
37
          this.setState({ password: event.target.value });
38
        };
39

40
        render() {
41
          return (
42
            <form onSubmit={this.handleSubmit}>
43
              用户名：
44
              <input type="text" name="username" onChange={this.saveUsername} />
45
              密码：
46
              <input
47
                type="password"
48
                name="password"
49
                onChange={this.savePassword}
50
              />
51
              <button>登陆</button>
52
            </form>
53
          );
54
        }
55
      }
56
      ReactDOM.render(<Login />, document.getElementById("test1"));
57
    </script>
58
  </body>
59
</html>

*8.生命周期#

下面是一副生命周期的流程，挂载比较简单就是一直往下走；setState就是先往左再往下；forceUpdate也是先往左再往下

初始化阶段：由ReactDOM.render()触发---初次渲染

constructor()

componentWillMount()

render()

componentDidMount() ===> 常用，一般在钩子里做初始化操作，例如：开定时器，发网络请求，订阅消息

更新阶段：由组件内部this.setState()或父组件render触发

shouldComponentUpdate()

componentWillUpdate()

render() ==> 必须使用一个

componentDidUpdate()

卸载组件：由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount ==>常用，一般做收尾动作，例如：关闭定时器取消订阅

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>生命周期</title>
6
  </head>
7
  <body>
8
    <div id="test"></div>
9
    <!-- 先引入核心库、扩展库、babel库 -->
10
    <script type="text/javascript" src="../js/react.development.js"></script>
11
    <script
12
      type="text/javascript"
13
      src="../js/react-dom.development.js"
14
    ></script>
15
    <script type="text/javascript" src="../js/babel.min.js"></script>
16
    <script type="text/javascript" src="../js/prop-types.js"></script>
17
    <script type="text/babel">
18
      // 创建组件
19
      // 生命周期回调函数<==>生命周期钩子函数<==>生命周期钩子<==>生命周期函数
20
      class Count extends React.Component {
21
        // 构造器
22
        constructor(props) {
23
          console.log("Count---constructor");
24
          super(props);
25
          this.state = { count: 0 };
26
        }
27

28
        add = () => {
29
          const { count } = this.state;
30
          this.setState({ count: count + 1 });
31
        };
32

33
        // 卸载组件按钮回调
34
        death = () => {
35
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
36
        };
37

38
        force = () => {
39
          this.forceUpdate();
40
        };
41
        // 组件将要挂载的钩子
42
        componentWillMount() {
43
          console.log("Count---componentWillMount");
44
        }
45

46
        // 组件挂载完毕的钩子
47
        componentDidMount() {
48
          console.log("Count---componentDidMount");
49
        }
50

51
        // 组件将要卸载的钩子
52
        componentWillUnmount() {
53
          console.log("Count---componentWillUnmount");
54
        }
55

56
        // 控制组件更新的“阀门”
57
        shouldComponentUpdate() {
58
          console.log("Count---shouldComponentUpdate");
59
          return true;
60
        }
61

62
        // 组件将要更新的钩子
63
        componentWillUpdate() {
64
          console.log("Count---componentWillUpdate");
65
        }
66

67
        // 组件更新完毕的钩子
68
        componentDidUpdate() {
69
          console.log("Count---componentDidUpdate");
70
        }
71

72
        render() {
73
          console.log("render");
74
          const { count } = this.state;
75
          return (
76
            <div>
77
              <h2>当前求和为:{count}</h2>
78
              <button onClick={this.add}>点我加1</button>
79
              <button onClick={this.death}>卸载组件</button>
80
              <button onClick={this.force}>不更改任何状态，强制更新</button>
81
            </div>
82
          );
83
        }
84
      }
85

86
      class A extends React.Component {
87
        state = { carName: "奔驰" };
88
        changeCar = () => {
89
          this.setState({ carName: "奥迪" });
90
        };
91
        render() {
92
          return (
93
            <div>
94
              <div>我是组件A</div>
95
              <button onClick={this.changeCar}>换车</button>
96
              <B carName={this.state.carName} />
97
            </div>
98
          );
99
        }
100
      }
101

102
      class B extends React.Component {
103
        componentWillReceiveProps(props) {
104
          // 这个函数有坑，非首次更新才执行
105
          console.log("B---componentWillReceiveProps");
106
        }
107
        render() {
108
          return (
109
            <div>
110
              <div>我是B组件，接收到的车是{this.props.carName}</div>
111
            </div>
112
          );
113
        }
114
      }
115
      ReactDOM.render(<A />, document.getElementById("test"));
116
    </script>
117
  </body>
118
</html>