个人笔记

或许为了自身写，或许为了知己写！

React16.x 笔记

发表于 | 更新于 |
字数统计 1.5k 字

编写 ToDoList 列表

根据官网提示自行安装 create-react-app 项目。

编写 HelloWord 组件

react 编写组件提供两种方式，一种为 class 组件形式，也叫有状态组件；一种为 function 组件形式，也叫做无状态组件。

其中，class 组件形式如下：

1
2
3
4
5
6
7
8
9
10

import React, {Component} from 'react'

class HelloWord extends Component() {
    constructor(props) {
        super(props)
    }

    return <div>Hello Word</div>
}

function 组件形式如下：

1
2
3
4
5
6

import React from 'react'

function HelloWord() {
    return <div>Hello Word</div>
}

如果返回内容为多行，可以在 return 后添加 ( ...代码 )，class 组件也是如此， 即：

1
2
3
4
5
6
7
8

import React from 'react'

function HelloWord() {
    return (
        <div>Hello Word</div>
    )
}

JXS 语法

在 react 组件中使用 JXS 注释内容有两种方式；

  • 一种为单行注释
1
2
3
4
5
6
7
8
9

import React from 'react'

function HelloWord() {
    return (
        // 注释
        <div>Hello Word</div>
    )
}
  • 一种为多行注释
1
2
3
4
5
6
7
8
9
10
11
import React from 'react'

// function 组件
function HelloWord() {
    return (
        {/*
            注释
        */}
        <div>Hello Word</div>
    )
}

编写标签，给标签添加类名需要注意使用 className，即

1
2
3
4
5
6
7
8

import React from 'react'

function HelloWord() {
    return (
        <div className="box">Hello Word</div>
    )
}

使用 label 时，注意使用 htmlFor，即：

1
2
3
4
5
6
7
8
9
10
11

import React from 'react'

function HelloWord() {
    return (
        <div>
            <label htmlFor="fename"></label>
            <input type="text" name="name" id="fename" />
        </div>
    )
}

解析 html 标签内容使用 dangerouslySetInnerHTML，即：

1
2
3
4
5
6
7
8
9
10

import React from 'react'

const html = "<h2>标签</h2>"

function HelloWord() {
    return (
        <div dangerouslySetInnerHTML={{_html:html}}></div>
    )
}

编写 ToDoList 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import React, {Component} from 'react'

class ToDoList extends Component{
    constructor(props) {
        super(props)

    }

    return (
        <ul>
            <li>内容一</li>
            <li>内容二</li>
        </ul>
    )
}

export default ToDoList

编写完成，在该项目根目录 index.js 引入该组件后在界面可查看内容。

删除 ToDoList

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
import React, {Component} from 'react'

class ToDoList extends Component{
    constructor(props) {
        super(props)
        this.state={
            list: ['内容一', '内容二']
        }
    }

    return (
        <ul>
            {
                this.state.list.map((item, index) => {
                    return (
                        <li 
                            key={item+index} 
                            onClick="this.deleteItem.bind(this, index)">
                            {item}
                        </li>
                    )
                })
            }
        </ul>
    )

    deleteItem(index) {
        let list = this.state.list;
        list.splice(1, index);
        this.setState({
            list: list
        })
    }
}

export default ToDoList

添加 ToDoList 列表内容

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

import React, {Component} from 'react'

class ToDoList extends Component{
    constructor(props) {
        super(props)
        this.state={
            inputVal: '',
            list: ['内容一', '内容二']
        }
    }

    return (
        <>
            <input type="text" 
                value={inputVal} 
                onChange={this.changeItem.bind(this)} />
            <button onClick={this.addItem.bind(this)}>click me</button>
            <ul>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <li 
                                key={item+index} 
                                onClick="this.deleteItem.bind(this, index)">
                                {item}
                            </li>
                        )
                    })
                }
            </ul>
        </input>
    )

    changeItem(e) {
        this.setState({
            inputVal: e.target.value
        })
    }
    
    addItem() {
        this.setState({
            list: [...this.state.list, this.state.inputVal],
            inputVal: ''
        })
    }

    deleteItem(index) {
        let list = this.state.list;
        list.splice(1, index);
        this.setState({
            list: list
        })
    }
}

export default ToDoList

父子组件传值

父组件：

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

import React, {Component} from 'react'

import ToDoListItem from 'ToDoListItem'

class ToDoList extends Component{
    constructor(props) {
        super(props)
        this.state={
            inputVal: '',
            list: ['内容一', '内容二']
        }
    }

    return (
        <>
            <input type="text" 
                value={inputVal} 
                onChange={this.changeItem.bind(this)} />
            <button onClick={this.addItem.bind(this)}>click me</button>
            <ul>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <ToDoListItem 
                                index={index}
                                content={item} 
                                deleteItem={this.deleteItem.bind(this)}
                                key={item+index} />
                        )
                    })
                }
            </ul>
        </input>
    )

    changeItem(e) {
        this.setState({
            inputVal: e.target.value
        })
    }
    
    addItem() {
        this.setState({
            list: [...this.state.list, this.state.inputVal],
            inputVal: ''
        })
    }

    deleteItem(index) {
        let list = this.state.list;
        list.splice(1, index);
        this.setState({
            list: list
        })
    }
}

export default ToDoList

子组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React, {Component} from 'react'

class TodoListItem extends Component{
    constructor(props) {
        super(props)
    }

    shouldComponentUpdate(nextProps, nextState) {
        if(this.props.content !== nextState.content) return true
    }

    return (
        <li onClick={this.deleteItem.bind(this)}>
            {this.props.content}
        </li>
    )

    deleteItem() {
        this.props.deleteItem(this.props.index)
    }
}

export default TodoListItem

PropsTypes 校验传递的值

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

import React, {Component} from 'react'
import PropTypes from 'prop-types'

class TodoListItem extends Component{
    constructor(props) {
        super(props)
    }

    return (
        <li onClick={this.deleteItem.bind(this)}>
            {this.props.content}
        </li>
    )

    deleteItem() {
        this.props.deleteItem(this.props.index)
    }
}

TodoListItem.propTypes = {
    content: PropTypes.string
}

/*
TodoListItem.defaultProp = {
    content: '今天天气很不错~'
}
*/

export default TodoListItem

ref属性

使用 ref 获取值。

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
import React, {Component} from 'react'

class ToDoList extends Component{
    constructor(props) {
        super(props)

        this.state={
            inputVal: '',
            list: []
        }
    }

    return (
        <>
            <input type="text" 
                value={inputVal} 
                ref={(input) => {this.input=input}}
                onChange={this.changeItem.bind(this)} />
            <button onClick={this.addItem.bind(this)}>click me</button>
            <ul>
                {
                    this.state.list.map((item, index) => {
                        return <li key={index+item}>{item}</li>
                    })
                }
            </ul>
        </>
    )

    changeItem() {
        this.setState({
            inputVal: this.input.value
        }, () => {
            // 回调函数中获取最新list数据 ...
        })
    }

    addItem() {
        this.setState({
            list: [...this.state.list, this.state.inputVal],
            inputVal: ''
        })
    }
}

生命周期函数

生命周期函数就是在某一时刻自动执行的函数。

  • 初始化阶段 （Initialization）

  • 挂载阶段（Mounting）

  • componentWillMount：组件即将挂在界面前执行。
1
2
3
componentWillMount() {
    console.log(`componentWillMount`)
}
  • render：页面 props 或 state 发生变化时执行。
1
2
3
render() {
    console.log(`render`)
}
  • componentDidMount：组件挂在完成时执行。
1
2
3
componentDidMount() {
    console.log(`componentDidMount`)
}
  • 请求接口可以放在该生命周期中。
  • 更新阶段 （Updation）
  • shouldComponentUpdate：在组件更新前自动执行。
1
2
3
4
shouldComponentUpdate() {
    console.log(`shouldComponentUpdate`)
    return true
}

要求必须返回布尔值。

  • componentWillUpdate：组件更新时执行。
1
2
3
componentWillUpdate() {
    console.log(`componentWillUpdate`)
}
  • componentDidUpdate：组件更新后执行。
1
2
3
componentDidUpdate() {
    console.log(`componentDidUpdate`)
}
  • componentWillReceiveProps：在子组件中使用，子组件接收 prop 该函数就会执行。
1
2
3
componentWillReceiveProps() {
    console.log(`componentWillReceiveProps`)
}

  • 子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。

  • 也就是说这个组件第一次存在于Dom中，函数是不会被执行的;

  • 如果已经存在于Dom中，函数才会被执行。

———— / END / ————
0%