react最近新增了很多的功能,像hooks 就是其中的一项
这就要解释一下 为啥要新增这些hooks 了:
react 本身 有三种写法:
1, es6以后的class的写法 ,最常用,生命周期函数也很方便,可能写法稍微啰嗦;
2, function无状态组件的写法 写起来非常的简单,缺点是没有生命周期钩子函数;
3, React.createClass 已经逐渐不用了不赘述。
这次的hook是就是为了无状态组件这中写法准备的 ,使无状态组件也可以拥有钩子函数生命周期,上代码
// 引入 useState, useEffect, useReducer, useRef 这些hooks
// useState 返回一个数组 [初始化的state,设置state的方法]
// useEffect 第一参数是匿名函数,第二个参数是个数组[用来放绑定的state的集合]
// useReducer 返回一个数组 [返回的state,dispatch]
// useRef 接受一个参数 返回一个对象 useRef(1) //{current:1}
import React, { useState, useEffect, useReducer, useRef } from 'react';
function Test (props) {
let {initValue} = props
// 得到【初始化的state,设置state的方法 】
const [state,setState] = useState(0) // 0作为state的初始值,初始化state
// 副作用函数 可以看作是component+ DidMount/DidUpdate/UnMount 的集合
useEffect(()=>{
document.title=state
})
// setState(state+1)改变state写法上也简单了
return (<div>
<h1>test</h1>
<div onClick={()=>{setState(state+1)}}>+</div>
<div>{state}</div>
</div>)
}
export default Test
稍微复杂点的
// 引入 各种新的机制hooks 使用state 使用副作用 使用reducer 使用ref 函数
import React, { useState, useEffect, useReducer, useRef } from 'react';
// 引入自己定义的reducer(随便一个reducer)
import { todosReducer } from '../useReducer';
// 生成自己effect hooks,其实我的感觉比较像是封装自己的方法
// 每一个state 都是主线 其他的 都跟着主线走 比如effect
// 作用是生成 state
function useCount(initValue = 0) {
// 使用新的 statehooks 数组里面是 【初始化的state,与之对应的设置方法】= 调用方法 生成state
const [count, setCount] = useState(initValue);
// 使用副作用函树绑定state去改变title
useEffect(() => {
document.title = `${count}`;
});
// 返回 生成的state
return [count, setCount];
}
// 生成自己effect hooks,其实我的感觉比较像是封装自己的方法
// 生成 ref
function usePrevious(value) {
// 使用 hooks 使用 ref
const ref = useRef(2);
console.log(ref)
// 使用副作用函数来生成 useEffect 异步执行
// useEffect(() => {
// ref.current = value;
// });
//由于是异步执行的 所以每次 返回的值都不及时 都是上一次的值
// return ref.current;
}
// 最后的 fun组件
function Muso(props) {
// 从props 中解构出initValue
const { initValue } = props;
// 通过 useReducer方法 来使用todosReducer
// todos 是redux里的state 而下面的 count则是该组件里的state
// dispatch 是改变todos对应的dispatch 初始值是[]
const [todos, dispatch] = useReducer(todosReducer, []);
// 通过自己封装的副作用函数拿到 state
const [count, setCount] = useCount(initValue);
// 通过自己自己封装的副作用函数拿到上一次的值
const prevCount = usePrevious(count);
return (
<div
onClick={() => {
setCount(count + 1);
dispatch({
type: 'add',
text: `dispatch:${count + 1}`,
});
}}
>
<div>{`prev:${prevCount}`}</div>
<div>{count}</div>
{todos.map((todo,index) => <div key={index}>{todo.text}</div>)}
</div>
);
}
export default Muso;