React教程（详细）

文章目录

React教程（详细）

React是一个用于构建用户界面的 JavaScript 库。

在这里插入图片描述

1：创建一个 React 程序

如果你不熟悉es6或nodeJs也没关系，此数实例都采用引入 js 文件方式开发react程序，可以直接创建html文件复制内容进去，在浏览器打开运行。首先创造你的兴趣，这才是最重要的。

有两种方式创建 React 程序。

第一种：引入 js 文件

  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
1
2

第二种：创建反应应用

npx create-react-app my-app
cd my-app
npm start
1
2
3

接下来的例子将用引入js文件方式书写，重要是掌握语法，两种方式都大同小异。

2：开始

创建一个html文件：index.html

<!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>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById('app'));
        root.render(
            <h1>Hello, world!</h1>
        );
    </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

这就是第一个示例。

3：使用 class 和 function 创建组件

3.1：function 组件

推荐函数名大写：

        function HelloWorld(){
            return(
                <h1>Hello, world!</h1>
            )
        }

        const root = ReactDOM.createRoot(document.getElementById('app'));
        root.render(
           <HelloWorld />
        );
1
2
3
4
5
6
7
8
9
10

往函数内传值：

        function HelloWorld(props){
            return(
                <h1>Hello, world! {props.name}!</h1>
            )
        }

        const root = ReactDOM.createRoot(document.getElementById('app'));
        root.render(
           <HelloWorld name="anny"/>
        );
1
2
3
4
5
6
7
8
9
10

3.2：class 组件

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return(
                    <h1>Hello, world! {this.props.name}!</h1>
                )
            }
        }
        
        const root = ReactDOM.createRoot(document.getElementById('app'));
        root.render(
           <HelloWorld name="anny"/>
        );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

组件类需要继承 React.Component
在 render() 函数内返回组件内容。

4：生命周期

挂载：

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

更新：

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载：

componentWillUnmount()

常用：

生命周期	函数
挂载	componentDidMount
更新	componentDidUpdate
卸载	componentWillUnmount

5：state

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    name:'tony'
                }
            }
            render(){
                return(
                    <h1>{this.state.name} said Hello, world! {this.props.name}!</h1>
                )
            }
        }

        const root = ReactDOM.createRoot(document.getElementById('app'));
        root.render(
           <HelloWorld name="anny"/>
        );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

初始值：this.state = {XXX:XXXX}
取值：this.state.XXXX
更改值：this.setState({ XXX:XXX })

创建一个倒计时：

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    time:100,
                    sit:null
                }
            }
            componentDidMount(){
                this.sit =  setInterval(()=>{
                    this.setState({
                        time:--this.state.time
                    })
                },1000)
            }
            componentWillUnmount(){
                clearInterval(this.sit);
            }
            render(){
                return(
                    <h1>{this.state.time}</h1>
                )
            }
        }

        const root = ReactDOM.createRoot(document.getElementById('app'));
        root.render(
           <HelloWorld name="anny"/>
        );
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

6：事件处理

6.1：方式一：不绑定this

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    time:100,
                    sit:null
                }
            }
            handle(){
                alert('click');
            }
            render(){
                return(
                    <h1 onClick={this.handle}>click me ！</h1>
                )
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这种方式不会绑定 this，所以在handle中不可以直接获取 this.state。

6.2：方式二：绑定this，返回函数调用

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    time:100,
                    sit:null
                }
            }
            handle(){
                alert(this.state.time);
            }
            render(){
                return(
                    <h1 onClick={()=>{this.handle()}}>click me ！</h1>
                )
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这种方式会自动绑定this,可以直接获取this.state 属性。

6.3：方式三：绑定this，使用bind绑定

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
                this.handle = this.handle.bind(this);
                this.state = {
                    time:100,
                    sit:null
                }
            }
            handle(){
                alert(this.state.time);
            }
            render(){
                return(
                    <h1 onClick={this.handle}>click me ！</h1>
                )
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

7：条件渲染

        function Login(props){
            if(props.isLogin){
                return(
                    <button onClick={props.handleChild}>退出登录</button>
                )
            }
            return(
                <button onClick={props.handleChild}>立即登陆</button>
            )
        }

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
                this.handle = this.handle.bind(this)
                this.state = {
                    isLogin:false
                }
            }
            handle(){
                this.setState({
                    isLogin:!this.state.isLogin
                })
            }
            render(){
                return(
                    <div>
                        <Login handleChild={this.handle} isLogin={this.state.isLogin}/>
                    </div>
                ) 
            }
        }
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

需要注意的是，应避免直接在子组件中修改props参数值

可以通过抛出事件传递给父组件，让父组件去修改自身的state值

在这里插入图片描述

8：列表

关于列表，你可以返回一个包含标签的数组，进而渲染出列表dom。

此外，请不要忘了设置key，否则你将收到一个来自react的警告。

        function List(){
            let li = [];
            let a = [1,2,3,4,5];
            for(let i = 0;i<a.length;i++){
                li.push(<li key={i}>{a[i]}</li>)
            }
            return li
        }

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return(
                    <ul>
                        <List />
                    </ul>
                )
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

设置key可以提高虚拟dom的diff判断，对提高性能非常有效。

9：受控组件值的实时修改

受控组件包含 input、textarea、select 等

如果学过vue，应该非常熟悉 v-model 语法糖，可以非常方便的获取更改表单的数据。

创建一个 input 组件：

        function Input(){
            return (
                <input type="text" />
            )
        }
1
2
3
4
5

把它放到我们的父组件中：

        function Input(){
            return (
                <input type="text" />
            )
        }

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return(
                    <div>
                        <Input />
                        <Input />
                    </div>
                )
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这时候我们可以看到两个输入框

接下来我们通过修改一个 input 框的值自动更改另一个输入框的值：

        function Input(props){
            return (
                <input value={props.value} onChange={props.childChange} type="text" />
            )
        }

        class HelloWorld extends React.Component{
            constructor(props){
                super(props)
                this.childChange = this.childChange.bind(this);
                this.state = {
                    value1:'',
                    value2:''
                }
            }
            childChange(e){
               this.setState({
                    value1:e.target.value,
                    value2:e.target.value
               })
            }
            render(){
                return(
                    <div>
                        <Input value={this.state.value1} childChange={this.childChange}/>
                        <Input value={this.state.value2}  childChange={this.childChange}/>
                    </div>
                )
            }
        }
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

此时，无论修改哪一个输入框，都会自动修改另一个输入框的值。

需要注意的是：前面我们说过，应避免直接在子组件中修改 props 值，尽量使用子组件抛出事件在父组件接收，进而在父组件中修改该值。主要原因是，后期代码多了，会很难查找具体修改这个变量的位置。

相关阅读:
Flink写入kafka的自定义Key值
 设计模式个人理解——工厂模式
 mac pro M1(ARM)安装：.Net、C#开发环境
 Android cmdline-tools 版本与其最小JDK关系
 未来互联网的新篇章：深度解析Web3技术
 《深入理解Java虚拟机》——Java内存区域与内存溢出异常
 速取！最好用的家居行业解决方案来了！
解决 cocos2d-x-4.0 IOS构建出错的问题—执行命令出错，返回值：65
如何正确的防止服务器被攻击？103.216.153.x
Scrum五大会议要怎么开？
原文地址：https://blog.csdn.net/qq_41974199/article/details/126808249