useState
- useState是react自带的一个hook函数,它的作用就是用来声明状态变量.useState这个函数接收的参数是我们的状态初始值,它返回了一个数组,这个数组的第 [0]项是当前当前的状态值,第 [1]项是可以改变状态值的方法函数。
import React,{useState} from "react"
export default ()=>{
let [count,setCount] = useState(0);
let addCount = ()=>setCount(count+1);
return (
<div>
<h2>{count}</h2>
<button onClick={addCount}>点击</button>
</div>
)
}
- useState : 创建一个状态,这个状态为0
- count : 代表当前状态值也就是0
- setCount : 更新状态的函数
- addCount = ()=>setCount(count+1);调用setCount就可以用来修改状态
可以在一个函数组件中使用多个,如下所示:
export default ()=>{
let [count,setCount] = useState(0);
let [age,setAge] = useState(0);
let [number,setNumber] = useState(0);
}
useEffect
- 我们写的有状态组件,通常会产生很多的副作用(side effect),比如发起ajax请求获取数据,添加一些监听的注册和取消注册,手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里,比如componentDidMount,componentDidUpdate和componentWillUnmount。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三。
- useEffect中有两个参数,第一个参数是一个函数,第二个参数是一个依赖的数据。第二个参数用来决定是否执行里面的操作,可以避免一些不必要的性能损失,只要第二个参数中的成员的值没有改变,就会跳过此次执行。如果传入一个空数组 [ ],那么该effect 只会在组件 mount 和 unmount 时期执行。
useEffect模拟componentDidMount && componentDidUpdate
import React,{useState,useEffect} from "react"
export default ()=>{
let [title,setTitle] = useState(0);
let updateTitle = ()=>setTitle(title+1);
return (
<div>
<h2>{title}</h2>
<button onClick={updateTitle}>点击</button>
</div>
)
//参数是一个函数 每次mount 或者 update都会调用当前函数
useEffect(()=>{
document.title = `页面为${count}`;
})
}
useEffect模拟componentDidMount
import React,{useState,useEffect} from "react"
export default ()=>{
let [title,setTitle] = useState(0);
let updateTitle = ()=>setTitle(title+1);
return (
<div>
<h2>{title}</h2>
<button onClick={updateTitle}>点击</button>
</div>
)
//将第二个参数设置为一个空数组则只会在componentDidMount中执行
useEffect(()=>{
document.title = `页面为${count}`;
},[])
}
useEffect模拟componentWillUnMount
- useEffect 中还可以通过让函数返回一个函数来进行一些清理操作,比如取消定时器等
useEffect = (()=>{
return ()=>{
//unmount时调用这里
document.removeEventListener();
}
},[])
useContext
页面展示如下:
实现代码如下:
1.封装createContext.js文件
import { createContext } from "react";
const myContext = createContext(null);
export default myContext;
2.父组件
- 关键代码:
<myContext.Provider value={count}>xxx </myContext.Provider>
import React, { useState} from "react";
import Counter from './Counter' //引入子组件
import myContext from './createContext' //引入createContext文件
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h4>我是父组件</h4>
<p>点击了 {count} 次!</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
点我
</button>
{/* 关键代码 */}
{/* 提供器 */}
<myContext.Provider value={count}>
<Counter />
</myContext.Provider>
</div>
);
}
export default App;
3.子组件
- 关键代码:
const count =useContext(myContext)
import React, { useContext} from 'react';
import myContext from './createContext' //引入createContext文件
// 关键代码
function Counter() {
const count = useContext(myContext); // 得到父组件传的值
return (
<div>
<h4>我是子组件</h4>
<p>这是父组件传过来的值:{count}</p>
</div>
)
}