react进阶用法完全指南

React调用回调函数，正确设置this指向的三种方法

1. 通过bind

this.increment = this.increment.bind(this);

2. 通过箭头函数

<button onClick={
   this.multi}>点我*10</button> 

multi = () => {
   
    this.setState({
   
        count: this.state.count * 10
    })
}

3. 箭头函数包裹

<button onClick={
   () => {
   this.muti2()}}>点我*10</button>  

绑定事件传递参数

通过箭头函数传递事件参数。

<li onClick={
   (e) => {
   this.movie(item,index,e)}}>{
   item}</li>

条件渲染

1. 通过if进行条件判断

const {
   isLogin} = this.state;
let welcome = null;
if (isLogin) {
   
    welcome = <h2>欢迎回来</h2>
} else {
   
    welcome = <h2>请先登录！</h2>
}

2. 使用三目运算符

{
   isLogin ? <h2>欢迎回来</h2> : <h2>请先登录！</h2> }

3. 使用逻辑与

下面这种写法可以省略null。

{
   isLogin && <h2>你哈欧亚</h2> }

列表渲染

1. 使用map高阶函数

{
   
    this.state.movies.map((item,index) => {
   
        return (
            <li onClick={
   (e) => {
   this.movie(item,index,e)}}>                {
   item}            </li>
        )
    })
}

2. 使用filter进行过滤

<ul>
    {
   
        this.state.scores.filter(item => {
   
            return item >= 60
        })
    }
</ul> 

3. 使用slice进行截取

区间是左闭右开。

{
   
    this.state.scores.slice(0,3).map(item => {
   
        return <li>{
   item}</li>
    })
}

脚手架的基本使用

使用脚手架创建项目

• 项目名称不能包含大写字母。

create-react-app demo

组件通信

1. 父组件向子组件传递数据通过props

• 父组件

export default class App extends Component {
   
  render() {
   
    return (
      <div>
          <Child  name ='张三' age="18" />
      </div>
    )
  }
}

• 子组件

class Child extends Component {
   
    constructor(props) {
   
        super()
        this.props = props;
    }
    render() {
   
        const {
   name,age} = this.props;
        return (
            <div>子组件获取到的name是：{
   name},age是：{
   age}</div>
        )
    }
}

相关React实战视频讲解：进入学习

2. 子组件向父组件传递数据通过回调函数

import React, {
    Component } from 'react';

class Btn extends Component {
   
    render() {
   
        const {
   increment} = this.props;
        return (
            <button onClick={
   increment}>+1</button>
        )
    }
}


class App extends Component {
   
    constructor() {
   
        super();
        this.state = {
   
            count: 0
        }
    }
    render() {
   
        const {
   count} = this.state;
        return (
            <div>
                <h1>当前求和为：{
   count}</h1>
                <Btn increment = {
   e => this.increment()} />            </div>
        );
    }
    increment() {
   
        console.log(666);
        this.setState({
   
            count: this.state.count + 1
        })
    }
}

export default App;

3. 跨组件层级通信（Context）(类组件)

import React, {
    Component } from 'react'

const UserContext = React.createContext({
   
    name: '张三',
    age: 20
})

class Sub extends Component {
   
    render() {
   
        return (
            <div>
                <h1>name是：{
   this.context.name }</h1>
                <h1>age是：{
   this.context.age}</h1>
            </div>
        )
    }
}

Sub.contextType = UserContext
function Profile() {
   
    return (
        <div>
            <Sub />
            <ul>
                <li>设置1</li>
                <li>设置2</li>
                <li>设置3</li>
                <li>设置4</li>
            </ul>
        </div>
    )
}

export default class App extends Component {
   
    constructor(){
   
        super();
        this.state = {
   
            name: '李四',
            age: 18
        }
    }
    render() {
   
        return (
            <div>
                <UserContext.Provider value = {
   this.state}>
                    <Profile />
                </UserContext.Provider>
            </div>
        )
    }
}

下面是函数式组件的写法

function Sub(props) {
   
    return (
        <UserContext.Consumer>
            {
                   value => {
                       return (                        <div>
                            <h1>name是: {
   value.name}</h1>
                            <h1>age是: {
   value.age}</h1>
                        </div>
                    )                }            }        </UserContext.Consumer>
    )
}

4. 任意组件通信（事件总线event bus）

1. 安装events库

npm install events

2. 创建eventBus对象

const eventBus = new EventEmitter()

3. 通过emit发送消息

<button onClick={
   e => eventBus.emit('sayHello','Hello Home')}>点击向Home组件发送消息</button>

4. 通过addListener来监听消息

eventBus.addListener('sayHello',(args) => {
   
    this.setState({
   
        message: args
    })
})

• 在线CodeSandBox

参数验证

使用PropTypes进行参数验证。

import React from 'react'
import PropTypes from 'prop-types'
export default function App() {
   
    const names = [1,2,3]
    return (
        <div>
            <Cpn name="张三" age={
   20} names={
   names} />
        </div>
    )
}

function Cpn(props) {
   
    const {
    name, age,names } = props;
    return (
        <div>
            <h1>{
   name} + {
   age} + </h1>
            {
                   names.map(item => item)            }        </div>
    )
}

Cpn.propTypes = {
   
    names: PropTypes.array,
    age: PropTypes.number.isRequired
}

React实现slot

通过props进行传递jsx。

• 父组件

export default class App extends Component {
   
  render() {
   
    return (
      <div>
          <NavBar               leftSlot={
   <button>111</button>}              centerSlot={
   <a href