React在16.18之后hooks新特性

- useState
- useEffect
- useContext
- useReducer
- useMemo
- useCallback
- useRef
- 自定义hook

useState,

useState用于设置状态。

``jsx
const [count, setCount] = useState({
firstCount: initialCount1,
secondCount: initialCount2
});
`

useEffect。

useEffect用于执行副作用操作，其第一个参数是一个函数，用于执行副作用操作，如：绑定事件，操作DOM，根据某个状态来执行异步操作；第二个参数是一个数组，表示依赖的状态，如不传，则表示只会在初始render时执行一次。另外，其return一个函数，并在该函数中释放资源，如停止定时任务。

`jsx
// 操作DOM
useEffect(() => {
console.log("use effect.");
document.title = count ${count};
}, [count]);

// 根据userId的变化来执行这个操作
const [useId, setUserId] = useState(1001);
useEffect(() => {
// fetch, ajax, axios
}, [userId])
`

userContext

userContext类似于Java中的ThreadLocal，起到一个上下文的作用。

`jsx
// producer
// App.jsx
export const XXXContext = React.createContext();




// consumer
import {useContext} from 'react';
import {XXXContext} from 'App';
const xxx = useContext(XXXContext);
`

useReducer

useReducer是useState的替代品，通过action来触发状态的变化。结合useContext可以实现属性代理

`jsx
import {useReducer, useContext} from 'react';
const initialState = 0;
const reducer = (state, action) => {
switch(action.type) {
case "increment":
return state + 1;
default:
return state;
}
};

const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
// fetch, axios, ajax
fetch(url)
.then(response => {
dispatch({type: 'SUCCSSS', payload: response});
})
.catch(err => {
dispatch({type: 'ERROR'});
})
}, [id])
`

##### useMemo
useMemo用于内存优化，将函数返回结果在内存缓存起来，如果没有变化，就不会重新计算。

`jsx
const Counter = () => {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);

// 当count1有变化，使用内存备忘录来记住count1计算出的值
const isEven = useMemo( () => {
let i = 0;
while(i < 2000000000) i++;
return count1 % 2 === 0;
}, [count1]);

return (



)
}
`

##### useCallback
React默认父组件的重新渲染会导致子组件的重新渲染。React在function的组件中，所有function都会在render时作为一个全新的function，但是大多数情况下我们不需要这样的函数，此时我们可以在组件上使用React.memo(component)并配合useCallback(() => {// change state code}, [field]), 这样可以减少很多自组件不必要的渲染。

`jsx
import {useState, useMemo, useCallback} from 'react';

const Title = React.memo(function () {
console.log('Rendering Title')
return (



useCallback Hook


)
});

const Button = React.memo(
function({ handleClick, children }) {
console.log('Rendering button - ', children)
return (

{children}

)
}
);

const Count = React.memo(
function({ text, count }) {
console.log(Rendering ${text})
return

}
);

function ParentComponent() {
const [age, setAge] = useState(25)
const [salary, setSalary] = useState(50000)

const incrementAge = useCallback(() => {
setAge(age + 1)
}, [age])

const incrementSalary = useCallback(() => {
setSalary(salary + 1000)
}, [salary])

return (