趣味前端

React 基础使用

一、JSX

1. JSX 的基本使用

  • 变量、表达式（使用{ }，括号中为变量或表达式）
  • class style（字符串或在{ }中使用对象、对象变量）
  • 子元素和组件
  • JSX 和原生 HTML 混用
const rawHtml = "<span>hello world</span>";
const rawHtmlData = {
  __html: rawHtml,
};
const rawHtmlElem = (
  <div>
    <p dangerousSetInnerHTML={rawHmtlEData}></p>
  </div>
);
1
2
3
4
5
6
7
8
9

2. JSX 条件渲染和列表渲染

（1）条件渲染

const blackBtn = <button className="btn-black">black btn</button>
const whiteBtn = <button className="btn-white">white btn</button>

render() {
    // if else
    if (condition) {
        return blackBtn
    }else {
        return whiteBtn
    }

    // 三元运算符
    return <div>{ condition ? blackBtn : whiteBtn }</div>

    // 与逻辑元素符
    return <div>{ condition && blackBtn }</div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

（2）列表渲染

  • map
  • key
render() {
    return <ul>{
        this.state.list.map(item => <li key={item.id}>{item.title}</li>)
    }</ul>
}
1
2
3
4
5

二、事件

  • bind this
  • 关于 event 参数
  • 传递自定义参数

1. 使用（注意 bind this）

  1. 在类中定义回调方法
  2. 在构造函数中bind this（只执行一次，一般情况下，不要再render中bind this，影响性能）
  3. JSX 中使用onXXX方式注册事件监听，也可以忽略 1 2 步骤，使用箭头函数代替

2. event 参数

event是React封装构造的SyntheticEvent，不是原生的event对象，它模拟原生事件几乎所有的功能，event.nativeEvent为原生事件，所有的事件都被挂载到 document 上（React16版本绑定到document上，React17绑定到root组件，有利于多个 React 版本并存，如微前端）

3. 传递自定义参数

render() {
    return <p onClick={ this.clickHandler.bind(this, id, title)}
}

// 最后一个参数为 event
clickHandler(id, title, event) {

}
1
2
3
4
5
6
7
8
9

三、表单

  • 受控组件
  • input textarea select 用 value
  • checkbox radio 用 checked

1. 受控组件

2. 代码演示

render() {
    return <div>
        <input id="inputName" value={this.state.name} onChange={this.onInputChanged}</input>

        <checkbox id="checkbox1" checked={this.state.flag} onChanged={this.onCheckChanged}></checkbox>
    </div>
}

onInputChanged = (e) => {
    this.setState({
        name: e.target.value
    })
}

onCheckChanged = (e) => {
    this.setState({
        flag: !this.state.flag
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

四、父子组件通讯

  • props传递参数
  • props传递函数
  • props类型检查

代码演示

// List 组件定义
class List extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [
                {
                    id: 1,
                    title: 'item 1'
                },
                ...
            ]
        }
    }

    render() {
        const { list } = this.props
        return <ul>
        {
            this.list.map(item => <li key={item.id}>{item.title}</li>)
        }
        </ul>
    }
}
// props 类型检查
List.propTypes = {
    list: PropTypes.arrayOf(PropTypes.object).isRequired
}


// List 组件使用
<List list={this.state.list} />
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

五、setState

  • 不可变值
  • 有可能是异步更新，也可能是同步更新
  • 可能被合并

1. 不可变值

  1. 不能直接修改this.state.xxx进行修改，要使用setState()方法进行修改
  2. 对象和数组操作不能修改原始值，需要生成新的值，再使用setState()进行修改
  • 对象：可使用{ ...this.state.xxx, a: 100 }或Object.assign( {}, this.state.obj, { a: 100 })进行更改
  • 数组：可使用[ ...this.state.originalArr, newElem ]或不更改原始数组的原型方法进行更改

2. setState 有可能是异步，也可能是同步

  1. setState直接使用时，为异步更新，第二个参数是回调函数，更新完成时回调，相当于 Vue 的 $nextTick
  2. setState在setTimeout或自定义 DOM 事件回调中使用时，为同步更新

3. setState 传入对象时会被合并，传入函数不会合并

  1. setState( {} )时，多次调用会被合并，只有第一次调用有效
  2. setState((prev, props) => {} )时，多次调用不会被合并

六、React 组件生命周期

  • 单组件生命周期
  • 父子组件生命周期，和 Vue 一样