Hooks简介
Hooks
是 React v16.7.0-alpha
中加入的新特性。它能够让函数组件拥有自己的state
。react 16.8.0
稳定版本支持Hooks
,本文就是演示 Hooks
在项目中的使用示例,对于内部的原理这里就不做详细说明。
useState
import React, { useState } from 'react';
function Example() {
// 声明一个名为“count”的新状态变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Example;
useEffect
import React, { useEffect } from 'react';
function Example() {
//生命周期中的componentDidMount
useEffect(() => {
console.log('componentDidMount')
},[]);
//生命周期中的componentDidMount
useEffect(() => {
console.log('componentDidMount')
return ()=>{ //componentWillUnmount
console.log('componentWillUnmount')
}
},[]);
//生命周期中的componentDidMount 和 componentDidUpdate
useEffect(() => {
console.log('类似于 componentDidMount 和 componentDidUpdate:')
});
return (
<div></div>
);
}
export default Example;
componentDidMount、componentDidUpdate、componentWillUnmount
的使用方法
useMemo
import React, { useMemo } from 'react';
export default ({a}) => {
const exampleA = useMemo(() => <div>{a}</div>, [a]); //当a的值 发生变化时候才会渲染
return exampleA
}
useRef
import React, { useRef } from 'react';
export default ({a}) => {
const inputEl = useRef(null);
return <input ref={ inputEl } type="text" />
}
react-router 获取路由参数
import React from 'react';
import { withRouter } from 'react-router-dom';
export default withRouter((props) => {
return <div>{props.match.params.id}</div>
})
react-redux和redux-saga 的使用
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
return {
list:state.list
};
};
const mapDispatchToProps = (dispatch) => {
return {
getList:()=>{},//只是实例使用方式
};
};
const useAddField = (props:Props) => {
useEffect(()=>{
console.log('----------第一次渲染')
this.props.list();
return ()=>{
console.log('-------退出')
}
},[]) //componentDidMount
console.log(props.list) //redux里面的值
return <div></div>
};
export default connect(mapStateToProps, mapDispatchToProps)(useAddField);
参考文档
参考博客
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。