react16.7.0的hooks

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;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值