React知识点总结

技术分享者
397 阅读6分钟

事件

使用bind

如果不使用bind绑定，this默认是undefined

import React from 'react'

class EventDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'zhangsan',
        }

        // 修改方法的 this 指向
        this.clickHandler1 = this.clickHandler1.bind(this)
    }
    render() {
        // // this - 使用 bind
        return <p onClick={this.clickHandler1}>
            {this.state.name}
        </p>
    }
    clickHandler1() {
        console.log('this....', this) // this 默认是 undefined
        this.setState({
            name: 'lisi'
        })
    }
}

export default EventDemo

使用静态方法

// this - 使用静态方法
return <p onClick={this.clickHandler2}>clickHandler2 {this.state.name}</p>

// 静态方法，this 指向当前实例
clickHandler2 = () => {
   this.setState({
       name: 'lisi'
   })
}

关于event

<a href="https://baidu.com/" onClick={this.clickHandler3}>click me</a>

// 获取 event
clickHandler3 = (event) => {
    event.preventDefault() // 阻止默认行为
    event.stopPropagation() // 阻止冒泡
    console.log('target', event.target) // 指向当前元素，即当前元素触发
    console.log('current target', event.currentTarget) // 指向当前元素，假象！！！

    // 注意，event 其实是 React 封装的。可以看 __proto__.constructor 是 SyntheticEvent 组合事件
    console.log('event', event) // 不是原生的 Event ，原生的是 MouseEvent
    console.log('event.__proto__.constructor', event.__proto__.constructor)

    // 原生 event 如下。其 __proto__.constructor 是 MouseEvent
    console.log('nativeEvent', event.nativeEvent)
    console.log('nativeEvent target', event.nativeEvent.target)  // 指向当前元素，即当前元素触发
    console.log('nativeEvent current target', event.nativeEvent.currentTarget) // 指向 document ！！！

    // 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力
    // 2. event.nativeEvent 是原生事件对象
    // 3. 所有的事件，都被挂载到 document 上
    // 4. 和 DOM 事件不一样，和 Vue 事件也不一样
}

打印结果如下：

表单

受控组件

  • 通过change事件来改变state
import React from 'react'

class FormDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'curry',
            info: '个人信息',
            city: 'beijing',
            flag: true,
            gender: 'male'
        }
    }
    render() {

         // 受控组件
         return <div>
             <p>{this.state.name}</p>
             <label htmlFor="inputName">姓名：</label> {/* 用 htmlFor 代替 for */}
             <input id="inputName" value={this.state.name} onChange={this.onInputChange}/>
         </div>

        // textarea - 使用 value
        return <div>
            <textarea value={this.state.info} onChange={this.onTextareaChange}/>
            <p>{this.state.info}</p>
        </div>

         // select - 使用 value
        return <div>
            <select value={this.state.city} onChange={this.onSelectChange}>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select>
            <p>{this.state.city}</p>
        </div>

         // checkbox
        return <div>
            <input type="checkbox" checked={this.state.flag} onChange={this.onCheckboxChange}/>
            <p>{this.state.flag.toString()}</p>
        </div>

         // radio
        return <div>
            male <input type="radio" name="gender" value="male" checked={this.state.gender === 'male'} onChange={this.onRadioChange}/>
            female <input type="radio" name="gender" value="female" checked={this.state.gender === 'female'} onChange={this.onRadioChange}/>
            <p>{this.state.gender}</p>
        </div>
    }
    onInputChange = (e) => {
        this.setState({
            name: e.target.value
        })
    }
    onTextareaChange = (e) => {
        this.setState({
            info: e.target.value
        })
    }
    onSelectChange = (e) => {
        this.setState({
            city: e.target.value
        })
    }
    onCheckboxChange = () => {
        this.setState({
            flag: !this.state.flag
        })
    }
    onRadioChange = (e) => {
        this.setState({
            gender: e.target.value
        })
    }
}

export default FormDemo

setState

  • 不可变值
  • 可能是异步
  • 可能会被合并

不可变值

从下面代码中可以看出：变量，数组，对象都需要遵循不可变值

import React from 'react'

class StateDemo extends React.Component {
    constructor(props) {
        super(props)

        // 第一，state 要在构造函数中定义
        this.state = {
            count: 0
        }
    }
    render() {
        return <div>
            <p>{this.state.count}</p>
            <button onClick={this.increase}>累加</button>
        </div>
    }
    increase = () => {
         // 第二，不要直接修改 state ，使用不可变值 ----------------------------
         // this.state.count++ // 错误
         this.setState({
             count: this.state.count + 1 // SCU
         })
      	// 操作数组、对象的的常用形式
      	// 不可变值（函数式编程，纯函数） - 数组
       const list5Copy = this.state.list5.slice()
       list5Copy.splice(2, 0, 'a') // 中间插入/删除
       this.setState({
           list1: this.state.list1.concat(100), // 追加
           list2: [...this.state.list2, 100], // 追加
           list3: this.state.list3.slice(0, 3), // 截取
           list4: this.state.list4.filter(item => item > 100), // 筛选
           list5: list5Copy // 其他操作
       })
       // 注意，不能直接对 this.state.list 进行 push pop splice 等，这样违反不可变值

       // 不可变值 - 对象
       this.setState({
           obj1: Object.assign({}, this.state.obj1, {a: 100}),
           obj2: {...this.state.obj2, a: 100}
       })
       // 注意，不能直接对 this.state.obj 进行属性设置，这样违反不可变值
	}
}

export default StateDemo

可能是异步更新

this.setState({
    count: this.state.count + 1
}, () => {
    console.log('count by callback', this.state.count) // 回调函数中可以拿到最新的 state
})
console.log('count', this.state.count) // 异步的，拿不到最新值

打印如下：

setTimeout 中 setState 是同步的

// setTimeout 中 setState 是同步的
setTimeout(() => {
    this.setState({
        count: this.state.count + 1
    })
    console.log('count in setTimeout', this.state.count)
}, 0)

打印如下：

自己定义的 DOM 事件，setState 是同步的

 bodyClickHandler = () => {
    this.setState({
        count: this.state.count + 1
    })
    console.log('count in body event', this.state.count)
}
componentDidMount() {
    // 自己定义的 DOM 事件，setState 是同步的
    document.body.addEventListener('click', this.bodyClickHandler)
}

可能会被合并

传入对象，会被合并（类似 Object.assign ）

 // 传入对象，会被合并（类似 Object.assign ）。执行结果只一次 +1
this.setState({
    count: this.state.count + 1
})
this.setState({
    count: this.state.count + 1
})
this.setState({
    count: this.state.count + 1
})

传入函数，不会被合并。

  // 传入函数，不会被合并。执行结果是 +3
  this.setState((prevState, props) => {
      return {
          count: prevState.count + 1
      }
  })
  this.setState((prevState, props) => {
      return {
          count: prevState.count + 1
      }
  })
  this.setState((prevState, props) => {
      return {
          count: prevState.count + 1
      }
  })

生命周期

react生命周期

函数组件

  • 1.纯函数，输入props,输出jsx
  • 2.没有实例，没有生命周期，没有state

非受控组件

ref

使用方法

  • 第一步:创建ref
  • 第二步：绑定到dom元素
  • 第三步：通过this.nameInputRef.current 获取dom
  • 第四步：操作dom

使用场景

  • 必须手动操作dom,不能使用state。如上传文件。
import React from 'react'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'curry',
            flag: true,
        }
      	// 第一步:创建ref
        this.nameInputRef = React.createRef() // 创建 ref
    }
    render() {
        return <div>
            {/* 使用 defaultValue 而不是 value ，使用 ref */}
      			// 第二步：绑定到dom元素
            <input defaultValue={this.state.name} ref={this.nameInputRef}/>
            {/* state 并不会随着改变 */}
            <span>state.name: {this.state.name}</span>
            <br/>
            <button onClick={this.alertName}>alert name</button>
        </div>
    }
    alertName = () => {
      	// 第三步：通过this.nameInputRef.current 获取dom
        const elem = this.nameInputRef.current // 通过 ref 获取 DOM 节点
        // 第四步：操作dom
        alert(elem.value) // 不是 this.state.name
    }
}

export default App

受控组件 vs 非受控组件

  • 1.优先使用受控组件，符合react设计原则
  • 2.必须操作dom,再使用非受控组件

Portals

  • 作用：让组件渲染到父组件外

先看下组件正常渲染

import React from 'react'
import ReactDOM from 'react-dom'
import './style.css'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    render() {
        // // 正常渲染
        return <div className="modal">
            {this.props.children} {/* vue slot */}
        </div>
    }
}

export default App

.modal {
    position: fixed;
    width: 300px;
    height: 100px;
    top: 100px;
    left: 50%;
    margin-left: -150px;
    background-color: #000;
    /* opacity: .2; */
    color: #fff;
    text-align: center;
}

如下：modal渲染到了body里面。

使用Portals将modal渲染到body第一层。

import React from 'react'
import ReactDOM from 'react-dom'
import './style.css'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    render() {
        // 使用 Portals 渲染到 body 上。
        // fixed 元素要放在 body 上，有更好的浏览器兼容性。
        return ReactDOM.createPortal(
            <div className="modal">{this.props.children}</div>,
            document.body // DOM 节点
        )
    }
}

export default App

如下：modal就在body第一层了。

Portals使用场景

  • 1.overflow:hidden
  • 2.z-index值太小
  • 3.fixed需要放在body第一层

context

适用公共信息传递给每个组件

第一步：创建 Context 填入默认值（任何一个 js 变量）

const ThemeContext = React.createContext('light')

第二步：将需要共享的数据放到ThemeContext.Provider里面的value属性，同时将需要消费共享数据的组件放到直接看下代码：ThemeContext.Provider里面。

<ThemeContext.Provider value={this.state.theme}>
    <Toolbar />
    <hr/>
    <button onClick={this.changeTheme}>change theme</button>
</ThemeContext.Provider>

第三步：在消费的组件中获取并使用

ThemedButton.contextType = ThemeContext // 指定 contextType 读取当前的 theme context。
// 底层组件 - class 组件
class ThemedButton extends React.Component {
    // 指定 contextType 读取当前的 theme context。
    // static contextType = ThemeContext // 也可以用 ThemedButton.contextType = ThemeContext
    render() {
        const theme = this.context // React 会往上找到最近的 theme Provider，然后使用它的值。
        return <div>
            <p>button's theme is {theme}</p>
        </div>
    }
}

还可以使用ThemeContext.Consumer来消费共享数据

// 底层组件 - 函数是组件
function ThemeLink (props) {
    // const theme = this.context // 会报错。函数式组件没有实例，即没有 this

    // 函数式组件可以使用 Consumer
    return <ThemeContext.Consumer>
        { value => <p>link's theme is {value}</p> }
    </ThemeContext.Consumer>
}

全部代码如下：

import React from 'react'

// 创建 Context 填入默认值（任何一个 js 变量）
const ThemeContext = React.createContext('light')

// 底层组件 - 函数是组件
function ThemeLink (props) {
    // const theme = this.context // 会报错。函数式组件没有实例，即没有 this

    // 函数式组件可以使用 Consumer
    return <ThemeContext.Consumer>
        { value => <p>link's theme is {value}</p> }
    </ThemeContext.Consumer>
}

// 底层组件 - class 组件
class ThemedButton extends React.Component {
    // 指定 contextType 读取当前的 theme context。
    // static contextType = ThemeContext // 也可以用 ThemedButton.contextType = ThemeContext
    render() {
        const theme = this.context // React 会往上找到最近的 theme Provider，然后使用它的值。
        return <div>
            <p>button's theme is {theme}</p>
        </div>
    }
}
ThemedButton.contextType = ThemeContext // 指定 contextType 读取当前的 theme context。

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {
    return (
        <div>
            <ThemedButton />
            <ThemeLink />
        </div>
    )
}

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            theme: 'light'
        }
    }
    render() {
        return <ThemeContext.Provider value={this.state.theme}>
            <Toolbar />
            <hr/>
            <button onClick={this.changeTheme}>change theme</button>
        </ThemeContext.Provider>
    }
    changeTheme = () => {
        this.setState({
            theme: this.state.theme === 'light' ? 'dark' : 'light'
        })
    }
}

export default App

异步组件

  • 1.import()
  • 2.React.lazy
  • 3.React.Suspense
import React from 'react'

const ContextDemo = React.lazy(() => import('./ContextDemo'))

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return <div>
            <p>引入一个动态组件</p>
            <hr />
            <React.Suspense fallback={<div>Loading...</div>}>
                <ContextDemo/>
            </React.Suspense>
        </div>
    }
}

export default App

性能优化

  • 1.scu：shouldComponentUpdate
  • 2.PureComponent和React.memo
  • 3.不可变值immutable.js

scu：默认返回true

shouldComponentUpdate(nextProps, nextState) {
    if (nextState.count !== this.state.count) {
        return true // 可以渲染
    }
    return false // 不重复渲染
}

父组件更新，子组件也会更新。这时需要scu。

  • PureComponent：SCU中实现了浅比较, Class组件
  • React.memo：函数组件

高阶组件

接收一个组件，返回一个新组件

import React from 'react'

// 高阶组件
const withMouse = (Component) => {
    class withMouseComponent extends React.Component {
        constructor(props) {
            super(props)
            this.state = { x: 0, y: 0 }
        }
  
        handleMouseMove = (event) => {
            this.setState({
                x: event.clientX,
                y: event.clientY
            })
        }
  
        render() {
            return (
                <div style={{ height: '500px' }} onMouseMove={this.handleMouseMove}>
                    {/* 1. 透传所有 props 2. 增加 mouse 属性 */}
                    <Component {...this.props} mouse={this.state}/>
                </div>
            )
        }
    }
    return withMouseComponent
}

const App = (props) => {
    const a = props.a
    const { x, y } = props.mouse // 接收 mouse 属性
    return (
        <div style={{ height: '500px' }}>
            <h1>The mouse position is ({x}, {y})</h1>
            <p>{a}</p>
        </div>
    )
}

export default withMouse(App) // 返回高阶函数

Render props

import React from 'react'
import PropTypes from 'prop-types'

class Mouse extends React.Component {
    constructor(props) {
        super(props)
        this.state = { x: 0, y: 0 }
    }
  
    handleMouseMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }
  
    render() {
      return (
        <div style={{ height: '500px' }} onMouseMove={this.handleMouseMove}>
            {/* 将当前 state 作为 props ，传递给 render （render 是一个函数组件） */}
            {this.props.render(this.state)}
        </div>
      )
    }
}
Mouse.propTypes = {
    render: PropTypes.func.isRequired // 必须接收一个 render 属性，而且是函数
}

const App = (props) => (
    <div style={{ height: '500px' }}>
        <p>{props.a}</p>
        <Mouse render={
            /* render 是一个函数组件 */
            ({ x, y }) => <h1>The mouse position is ({x}, {y})</h1>
        }/>
        
    </div>
)

/**
 * 即，定义了 Mouse 组件，只有获取 x y 的能力。
 * 至于 Mouse 组件如何渲染，App 说了算，通过 render prop 的方式告诉 Mouse 。
 */

export default App
avatar
文章
阅读
粉丝