【react】浅探react函数组件与类组件

创建

import React, {Component} from 'react';

//函数组件
const TodoHeader = () => {
    return (<div></div>)
}

//类组件
class TodoHeaderClass extends Component {
    render() {
        return (<div></div>);
    }
}

接收自定义属性

//函数组件
const TodoHeader:FunctionComponent = props => {
    const {add, listLength} = props;
    const addTodo = (event) => {
        const { keyCode, target } = event;
        if(keyCode === 13){
            add({id: listLength, title: target.value})
        }
    }
    return (
        <div className={'todo-header'}>
            <input type="text" onKeyUp={addTodo} />
        </div>)
}


//类组件
class TodoHeard extends Component {

    handleKeyUp = (event) => {
        const {keyCode,target} = event;
        if(keyCode !== 13) return;
        if(!target.value.trim()){
            alert('输入不能为空');
            return;
        }
        this.props.add(target.value);
        target.value = '';
    }

    render() {
        return (
            <div className="head">
                <input type="text" onKeyUp={this.handleKeyUp} className="todo-input" />
            </div>
        );
    }
}

组件内定义、更新变量

//函数组件
const Todo = () => {
    const [todoList,setTodoList] = useState([
        {id:0,title:'吃饭',done:true},
        {id:1,title:'睡觉',done:true},
        {id:2,title:'打豆豆',done:false}]);

    const add = (newItem) => {
        setTodoList([...todoList,newItem])
    }

    const delItem = (index) => {
        setTodoList(todoList.filter((item,i) => i !== index))
    }

    return (
       <div className="todo-content">
           <TodoHeader add={add}  listLength={todoList.length} />
           <TodoBody delItem={delItem} list={todoList} />
           <TodoFooter/>
       </div>)
}


//类组件
export default class TodoList extends Component {

    state ={ todos:[{
            id:'001',
            name:'吃饭',
            done:true
        },{
            id:'002',
            name:'睡觉',
            done:false
        },{
            id:'003',
            name:'打豆豆',
            done:true
        }]};

    add = (data) => {
        const newTodos = [{id:Math.random(),name:data,done:false},...this.state.todos]
        this.setState({todos:newTodos})
    }

    doneToggle = index => {
        const { todos } = this.state;
        todos[index].done = !todos[index].done;
        this.setState({todos: todos});
    }

    checkAllTodo = done => {
        const {todos} = this.state
        const newTodos = todos.map(obj => {
            return {...obj,done}
        })
        this.setState({todos: newTodos})
    }

    render() {
        const { todos } = this.state;
        return (
            <div className="todo-content">
                <TodoHeard add={this.add}></TodoHeard>
                <TodoBody todos={todos} doneToggle={this.doneToggle} ></TodoBody>
                <TodoFooter todos={todos} checkAll={this.checkAllTodo} ></TodoFooter>
            </div>
        );
    }
}

生命周期

//函数组件
useEffect(() => {},[])//首次渲染
const [n, setN] = React.useState(0)
useEffect(() => {     //  模拟  componentDidUpdate 
        console.log('n 变化了')
},[n])  // 数组里面可以写多个参数表示监听多个变量

useEffect(() => {     //  模拟  componentDidUpdate 
        console.log('任意属性变更了')
})  // 不写数组表示监听所有 useState  的变量

useEffect(() => {    
        return () => {
            console.log('Child 销毁了')
        }
})    //  返回一个函数 在销毁时执行


//类组件
componentDidMount() {}//首次渲染
componentDidUpdate() {}//数据更新
componentWillUnmount() {}//组件卸载

先写到这里，后续了解到新东西再更新。