关于 React Hook 可能出现的使用误区总结

请记住react 的公式： UI = f(state) ，这很重要。

useState

---

🌰示例1：useState 拆分过细

const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();
const [school, setSchool] = useState();
const [age, setAge] = useState();
const [address, setAddress] = useState();

const [weather, setWeather] = useState();
const [room, setRoom] = useState(); 

较好解决方式✌: 适当的合并 state

学会归类这些状态。

firstName, lastName 均是用户的信息，可以放在一个 useState 进行管理。

const [userInfo, setUserInfo] = useState({firstName,lastName,school,age,address
});

const [weather, setWeather] = useState();
const [room, setRoom] = useState(); 

注意🎈：useState 的 set 动作永远是 替换 值。（React class 中的 this.setState 是会进行 合并 的）

在进行变更用户的某个信息例如 年龄 的时候记得带上之前的值。

setUserInfo((prevInfo) => ({...prevInfo,age: newAge
})) 

🌰示例2：多个状态实则只是一个状态的变形

doneSource 、doingSource 是 source 转变的。

const SomeComponent = (props) => {const [source, setSource] = useState([{type: 'done', value: 1},{type: 'doing', value: 2},])const [doneSource, setDoneSource] = useState([])const [doingSource, setDoingSource] = useState([])useEffect(() => {setDoingSource(source.filter(item => item.type === 'doing'))setDoneSource(source.filter(item => item.type === 'done'))}, [source])return (<div> ..... </div>)
} 

较好解决方式✌: 当一个状态可以被另外一个状态计算出来的话就不要去声明

const SomeComponent = (props) => {const [source, setSource] = useState([{type: 'done', value: 1},{type: 'doing', value: 2},])// 这里的 useMemo 视实际情况添加，通常不是需要大量的计算 react 是不建议使用 useMemoconst doneSource = useMemo(()=> source.filter(item => item.type === 'done'), [source]);const doingSource = useMemo(()=> source.filter(item => item.type === 'doing'), [source]);return (<div> ..... </div>)
} 

useRef

---

🌰示例1：多余的依赖

期望： 只有当 visible 变化时，弹出 Message 。

其中 text 、color 分别控制 弹窗的文案、背景颜色

function Demo(props) {const [visible, setVisible] = useState(false);const [text, setText] = useState('');const [color, setColor] = useState('red');useEffect(() => {Message(visible, text, color);}, [visible]);return (<div><buttononClick={() => setCount(visible =>!visible)}>click</button><input value={text} onChange={e => setText(e.target.value)} /><input value={color} onChange={e => setColor(e.target.value)} /></div>)
} 

如果你下载了 eslint-plugin-react-hooks插件的话，你会发现这行代码出现警告。

于是你在 effect deps 增加了 text 、color 依赖。

于是出现了一个问题，当 text 、 color 发生变化的也会上传数据， 这并不符合我们的目标。

较好解决方式✌：善用 useRef

当text 、 color 改变的时候不需要重新更新视图的时候，尝试使用 useRef 去替代。

使用 useRef 去替换useState：

function Demo(props) {const [visible, setVisible] = useState(false);const te