react浅探react函数组件与类组件
Posted GHUIJS
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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() //组件卸载
先写到这里,后续了解到新东西再更新。
以上是关于react浅探react函数组件与类组件的主要内容,如果未能解决你的问题,请参考以下文章