klenq's blog HomeArchivesTagsCategories
React基础全家桶学习笔记
|Notes

React基础

  • React.js
  • React Router
  • PubSub
  • Redux
  • Ant Design
  • …

React 基础

react使用JSX

创建一个hello world程序

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
<!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>hello_react</title>
</head>
<body>
    <!-- 一个容器 -->
    <div id="test"></div>

    <!-- react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- babel, 将jsx转换为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!--  -->
    <script type="text/babel">
    // 创建虚拟dom
    const VDOM  = <h1>Hello, React</h1>

    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'));



    </script>

</body>
</html>

引入js库需要有顺序

  1. 核心库
  2. dom库
  3. babel库

js标签type="text/babel"

代表里面的是jsx语法代码

jsx语法可以使用html, 然后使用ReactDOM.render()对html进行渲染, html不能用引号引起来

如果不用jsx创建虚拟Dom

1
2
3
4
5
6
7
<script type="text/javascript">
    // 创建虚拟dom
    const VDOM  = React.createElement('h1',{id:'title'},'Hello, React')

    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

React.createElement(标签名, 属性, 标签体内容)

此方式过于麻烦

JSX就相当于JS的语法糖

真实DOM和虚拟DOM

虚拟DOM:

  1. 本质是Object类型对象
  2. 虚拟DOM比较轻
  3. 最终会被转化为真实DOM

JSX

  1. 全程 JavaScript XML
  2. 用来简化创建虚拟DOM
    1. 最终产生的就是一个js对象
    2. 不是字符串也不是HTML/XML标签
  3. 标签名任意, HTML标签或者自定义标签
  4. 标签中用JS表达式的时候需要用{}
  5. class指定要用className
  6. style内联样式需要用stlye={{key:value}}的方式写
  7. 只能有一个根标签, 标签必须闭合

练习示例: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/babel">
        
        const data = ['first','second','third']

        const VDOM = (
            <div>
                <h1>List</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key="">{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    
    
        ReactDOM.render(VDOM,document.getElementById('test'));

</script>

React组件化

模块化:

复用js, 简化js

组件化:

用来实现局部功能效果的代码和资源集合(html/css/js/image)

复用编码

​

函数组件

  1. 组件首字母必须大写
1
2
3
4
5
6
7
8
9
10
11
<script type="text/babel">

function Demo(){
    console.log(this) //this undefined 因为开启了strict mode
   
    return <h2>hello component</h2>
}

//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

类式组件

类复习知识

基础使用: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>

    class Person{

        constructor(name, age){
            this.name = name
            this.age = age
        }

        speak(){
            console.log(`my name is ${this.name}, my age is ${this.age}`);
        }
    }

    const p1 = new Person('tom',18)
    const p2 = new Person('jerry',19)
    p1.speak();
    p2.speak();
    console.log(p1)
    console.log(p2)
</script>

继承: 

1
2
3
4
5
6
7
8
class Student extends Person{

    constructor(name,age,grade){
        super(name,age);
        this.grade=grade

    }
}

子类一样可以调用父类方法, 也可以重写父类方法

1
2
3
4
speak(){
    console.log(`my name is ${this.name}, my age is ${this.age}, my grade is ${this.grade}`);

}

类式组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/babel">


    class MyComponent extends React.Component{
        render(){
            return(
                <h1>hello, component</h1>
            )
        }
    }
    ReactDOM.render(<MyComponent/>,document.getElementById('test'));



</script>

组件state状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/babel">


    class Weather extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                isHot: false,
                isCold: false
            }
        }
        render(){
            const {isHot} = this.state
            return(
                <h1>Today's is {isHot? 'Hot':'not Hot'}</h1>
            )
        }
    }
    ReactDOM.render(<Weather/>,document.getElementById('test'));



</script>

事件绑定

需要注意:

  • 方法作为onClick的回调函数, 不是通过实例调用的, 是直接调用, 所以 this 指向undefined
1
2
3
4
5
6
7
8
render(){
    const {isHot} = this.state
    return(
        //类中方法默认开启局部严格模式
        
        <h1 onClick={this.changeWeather}>Today's is {isHot? 'Hot':'not Hot'}</h1>
    )
}

解决方法, 需要更改this指向, 使用bind改变this指向, 然后赋值给当前对象的changeWeather

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
<script type="text/babel">
    class Weather extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                isHot: false,
                isCold: false,

            }
            this.changeWeather = this.changeWeather.bind(this)
        }
        render(){
            const {isHot} = this.state
            return(
                <h1 onClick={this.changeWeather}>Today's is {isHot? 'Hot':'not Hot'}</h1>
            )
        }
        changeWeather(){
            isHot = !isHot
        }

    }
    ReactDOM.render(<Weather/>,document.getElementById('test'));

</script>

但是功能还没有实现

React中状态state的值不可以直接更改

使用setState方法

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
<script type="text/babel">
    class Weather extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                isHot: false,
                isCold: false,

            }
            this.changeWeather = this.changeWeather.bind(this)
        }
        render(){
            const {isHot} = this.state
            return(
                <h1 onClick={this.changeWeather}>Today's is {isHot? 'Hot':'Cold'}</h1>
            )
        }
        changeWeather(){
            const {isHot} = this.state
            this.setState({isHot:!isHot})
        }

    }
    ReactDOM.render(<Weather/>,document.getElementById('test'));

</script>

setState方法不是覆盖所有的state下的变量, 而是只替换重名的

构造器调用一次

render调用1+n次, 每次更新都会再调用

自定义方法, 就取决绑定事件执行调用几次

Author: klenq
Link: https://klenq.github.io/2021/12/31/React基础全家桶/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
React