React学习笔记

react 基于数据驱动的框架，操作数据

• 声明式开发
• 可以和其他框架并存
• 组件化
• 单向数据流
• 函数式编程

零碎知识

• Fragment组件具有占位符作用

• import React, { Component } from ‘react’

import React form 'react'
const { Component } = React // 解构赋值
const Component = React.Component 

• 调用setState()更改state数据，该方法是异步的

handleInputChange (e) {
    this.setState({
        inputValue: e.target.value
    })
}

JSX语法

javascript的语法扩展

• 两种类型标签
  • 普通的html标签
  • 组件标签(首字母大写)
• html改变点
  • class => className
  • label标签的for属性 -> htmlFor
• JSX注释： {/* 这是JSX的注释 */}
• input框里不对html做转义：dangerouslySetInnerHTML={{__html: value}}

this指向

onChange事件里的this默认是undefined，通过bind更改this的指向，使之指向TodoList组件

render () {
    return (
        <Fragment>
            <input type='text' value={this.state.inputValue}
                    onChange={this.handleClick.bind(this)}/>
        </Fragment>
    )
}

```

组件间传值

• 父向子：属性传值
• 子和父通信：需接收父组件传递的方法（需变更方法的作用域）

ref位置特性

生命周期函数

针对组件

• Mounting
  • componentWillMount 组件即将挂载
  • render 渲染时执行
    • 组件初始化时执行一次
    • state、props数据改变时
  • componentDidMount 组件挂载完成
• Updation
  • props
    • componentWillReceiveProps 当组件时子组件并且有接收props时才存在
  • states
    • shouldComponentUpdate<sup>1</sup> 作为性能优化的方式而存在
    • componentWillUpdate 组件数据更新前
    • componentDidUpdate 组件数据完成更新
• UnMounting
  • componentWillUnMount 组件即将销毁时执行

路由

• BrowserRouter定义路由， 里面只能包裹一个元素
• Route路由项
• Switch组件：匹配Route的某一项，当找到匹配时不会再往下匹配

<BrowserRouter>
    <div>
        <Route path='/list/:id' component={Lister}></Route>
        <Route path='/newButton' component={NewButton}></Route>
    </div>
</BrowserRouter>

console.log(this.props.match.params.id) // 获取传递的id值

数据遍历输入内容

getMenuItems () {
    return this.state.list.map((item) => {
        return (
            <Menu.Item key={item.id} icon={<MailOutlined />}>
                {item.title}
            </Menu.Item>
        )
    })
}

---

1. return布尔值，默认是true,false适用于数据发生更改，页面没变化 ↩︎