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

Posted 2022-08-12 GHUIJS

创建

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() //组件卸载

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