react->Context笔记

此文章想记录一下react的context的使用以便于以后的复习

先附上我的目录

第一步在context.js上写下这样的代码：

context.js

import React from 'react'
const MyContext = React.createContext( 'defalut' )
export default MyContext

第二步在TodoList.js里把context.js引进来，然后再把要传给子组件用的方法和数据赋值到context.js上

TodoList.js

import React, { Component } from 'react'
import TodoForm from './TodoForm'
import TodoContent from './TodoContent'
import MyContext from '../context' // 把context.js引进来
class TodoList extends Component {
    constructor () {
        super ()
        this.state = {
            checkedAll:false,
            datalist: [
                {
                    id: Date.now(),
                    title: "明年实现月薪过万",
                    done: false,
                    selected: false
                },
                {
                    id: Date.now() + 10,
                    title: "男同学变成高富帅，迎娶白富美",
                    done: false,
                    selected: false
                },
                {
                    id: Date.now() + 20,
                    title: "女同学变成白富美，迎娶高富帅",
                    done: false,
                    selected: false
                }
            ]
        }
        this.addItem = this.addItem.bind( this )
        this.removeItem = this.removeItem.bind( this )
        this.completeItem = this.completeItem.bind( this )
        this.selecteItem = this.selecteItem.bind( this )
        this.selectedAll = this.selectedAll.bind( this )
        
    }
    addItem ( title ) { // 添加事项
        let datalist = this.state.datalist
        datalist.unshift(
            {
                id: Date.now() + 20,
                title,
                done: false,
                selected: false
            }
        )
        this.setState({ datalist })
    }
    removeItem ( id ) { // 删除事项
    //    let datalist = this.state.datalist.filter( item => item.id !== id )
       this.setState({ datalist: this.state.datalist.filter( item => item.id !== id ) })
    }
    completeItem ( id ) { // 变成完成事项
        let datalist = this.state.datalist.map( item => {
            if ( item.id === id ) {
                item.done = !item.done
            }
            return item
        })
        this.setState( { datalist } )
    }
    selecteItem ( id ) {  // 改变check状态
       let datalist = this.state.datalist.map( item => {
           if ( item.id === id ) {
               item.selected = !item.selected
           }
           return item
       })
       this.setState( { datalist, checkedAll: datalist.every( item => item.selected ) } )
    }  
    selectedAll () {      // 全选
        let checkedAll = !this.state.checkedAll
        let datalist = this.state.datalist.map( item => {
            item.selected = checkedAll
            return item
        })
        this.setState( { checkedAll,datalist } )
    }
    render () {
        let {selecteItem,removeItem,completeItem,addItem} = this
        let { datalist, checkedAll } = this.state
        return (
            <div>
               <MyContext.Provider value = { { selecteItem,removeItem,completeItem,addItem } }>  // 将需要的方法传到MyContext里传递,那么就不用一个个传递到子组件这么麻烦了，但是使用context会使组件复用性变差
                    <TodoForm 
                    addItem = { addItem }
                    ></TodoForm>
                    <TodoContent
                    selectedAll = { this.selectedAll }
                    datalist = { datalist }
                    checkedAll = { checkedAll }
                    >
                    </TodoContent>
                </MyContext.Provider>
                
            </div>
        )
    }
}
export default TodoList

TodoList的子组件有TodoContent.js和TodoForm.js

TodoContent.js

import React from 'react'
import PropTypes from 'prop-types'
import TodoItem from './TodoItem'
function TodoContent ( props ) {
    console.log( 'TodoContent.props', props )
    return (
        <>
            <table>
                <thead>
                    <tr>
                        <th><input type = 'checkbox' checked = { props.checkedAll } onChange = { props.selectedAll } />全选</th>
                        <th>#</th>
                        <th>待办事项</th>
                        <th>是否完成</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        props.datalist.map( (item,idx) => {
                            return (
                                <TodoItem
                                key = { item.id }
                                data = { item }
                                idx = { idx }
                                >
                                </TodoItem>
                            )
                        } )
                    }
                </tbody>
            </table>
            <div>总数:{props.datalist.length},完成:{props.datalist.filter( item => item.done).length},未完成:{props.datalist.filter( item => !item.done).length}</div>
        </>
    )
}
TodoContent.propTypes = {
    datalist: PropTypes.array.isRequired
}
TodoContent.defaultProps = {
    datalist: []
}
export default TodoContent

TodoItem.js(TodoContent.js的子组件)

import React from 'react'
import MyContext from '../context'
import Button from './TodoButton'
function TodoItem({ data, idx }) {
    return (
        <MyContext.Consumer> // 使用此标签来把context的值传进来，那么函数组件就可以使用这样的方式来接受context父组件传过来的方法了，相当于vue的bus总线一样，只不过react的写法多端
            {
                value => {
                    let { selecteItem,removeItem,completeItem } = value
                    return (
                        <tr>
                            <td>
                                <input type='checkbox' checked={data.selected} onChange={selecteItem.bind(null, data.id)} />
                            </td>
                            <td>{idx + 1}</td>
                            <td>{data.title}</td>
                            <td>{data.done ? '是' : '否'}</td>
                            <td>
                                <Button onClick={completeItem.bind(null, data.id)}>完成</Button>
                                <Button onClick={removeItem.bind(null, data.id)}>删除</Button>
                            </td>
                        </tr>
                        )
                    }
                }
        </MyContext.Consumer>
    )
}
export default TodoItem

TodoButton.js（TodoItem.js的子组件）

 能够获取到父组件传进来的文字和事件，

import React from 'react'
const TodoButton = props => {
    // console.log('Button:',props.children,React.Children, 'props->',props,'React->',React);
    React.Children.forEach(props.children,function(item,idx){
        // console.log(item,idx,'BUTTON出来的')
    })
    return (
        <button onClick = { props.onClick }>{ props.children }</button>
    )
}
export default TodoButton

TodoForm.js(TodoList的子组件)

TodoForm.js是类组件，有自己的状态也有this，所以可以这么写，通过TodoForm.contextType = MyContext，就能在类组件使用this.context.xxx()使用context的方法了

import React, { Component } from 'react'
import MyContext from '../context'
export default class TodoForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: ''
        }
        this.changeTitle = this.changeTitle.bind( this )
        this.additem = this.additem.bind( this )
        this.enter = this.enter.bind( this )
    }
    changeTitle(event) {
        this.setState({ title: event.target.value })
    }
    additem() {
        let  title  = this.state.title
        if ( String( title ).trim() === "" ) {
            alert( '事项名称必填!' )
            return
        }
        this.context.addItem( title )
        console.log('title->', title)
        this.setState({ title: '' })
        this.eles.focus()
    }
    enter(event) {
        if (event.which === 13) {
            this.additem()
        }
    }
    render() {
        return (
            <div>
                <input
                    type='text'
                    ref = { ele => this.eles = ele}
                    value = { this.state.title }
                    onChange = { this.changeTitle }
                    onKeyPress = { this.enter }
                />
                <button onClick={this.additem}>添加</button>
            </div>
        )
    }
}
TodoForm.contextType = MyContext

函数组件和类组件有所区别

因为class组件有this，所以可以使用this.context,而this.context是react里面自带，可以来获取context的值

但是函数组件没有this，只能使用Consumer来获取context的值，但是Consumer是class类组件和函数组件都能用的

所以使用context的方式也有所区别。

如果我哪里不对，希望大家纠正