组件类的缺点
- React 的核心是组件。早前版本,组件的标准写法是类。
// 一个简单的组件类 import React, { Component } from "react"; export default class Button extends Component { constructor() { super(); this.state = { buttonText: "Click me, please" }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(() => { return { buttonText: "Thanks, been clicked!" }; }); } render() { const { buttonText } = this.state; return <button onClick={this.handleClick}>{buttonText}</button>; } }
- 组件类的缺点:
- 大型组件很难拆分和重构,也很难测试。
- 业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑。
- 组件类引入了复杂的编程模式,比如 render props 和高级组件。
函数组件
- React 团队希望,组件不要变成复杂的容器,最好只是数据流的管道。开发者根据需要,组合管道即可。组件的最佳写法应该是函数,而不是类。
// 函数组件的例子 function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
- 函数组件的限制:必须是纯函数,不能包含状态,也不支持生命周期方法,无法取代类
- React Hooks 的设计目的,就是加强版函数组件,完全不使用“类”,就可写出全功能的组件。
Hook 的含义
- React Hooks 的意思:组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码“钩”进来。
- 既可使用 React 官方提供的常用钩子(如 useState、useContext、useReducer、useEffect),也可以封装自己的钩子。
- 所有的钩子都是为函数引入外部功能,所以 React 约定,钩子一律使用 use 前缀命名,便于识别。使用xxx功能,钩子就命名为 usexxx。
useState():状态钩子
- useState() 用于为函数组件引入状态,纯函数不能有状态,所以把状态放在钩子里面。
- useState() 这个函数接受状态的初始值,作为参数;然后返回一个数组,数组第一个成员是一个变量,指向状态的当前值。第二个成员是一个函数,用来更新状态,约定是 set 前缀加上状态的变量名。
useContext():共享状态钩子
-
useContext() 可以在组件之间共享状态
// 第一步就是使用 React Context API,在组件外部建立一个 Context。 const AppContext = React.createContext({}); // 组件封装 <AppContext.Provider value={{ username: 'superawesome' }}> <div className="App"> <Navbar/> <Messages/> </div> </AppContext.Provider>
上面代码中,
AppContext.Provider
提供了一个 Context 对象,这个对象可以被子组件共享。// Navbar 组件 const Navbar = () => { const { username } = useContext(AppContext); return ( <div className="navbar"> <p>AwesomeSite</p> <p>{username}</p> </div> ); } // Message 组件 const Messages = () => { const { username } = useContext(AppContext) return ( <div className="messages"> <h1>Messages</h1> <p>1 message for {username}</p> <p className="message">useContext is awesome!</p> </div> ) }
上面代码中,
useContext()
钩子函数用来引入 Context 对象,从中获取username
属性。
useReducer():action 钩子
- React 本身不提供状态管理功能,通常需要使用外部库,这方面最常用的库是 Redux。
- Redux 的核心概念:组件发出 action 与状态管理器通信,状态管理器收到 action 以后,使用 Reducer 函数算出新的状态
- Reducer 函数形式: (state, action) => newState
- useReducer() 钩子用来引入 Reducer 功能。
const [state, dispatch] = useReducer(reducer, initialState);
- useReducer() 的基本用法:接受 Reducer 函数和状态的初始值作为参数,返回一个数组。数组的第一个成员是状态的当前值,第二个成员是发送 action 的 dispatch 函数。
// 用于计算状态的 Reducer 函数 const myReducer = (state, action) => { switch(action.type) { case('countUp'): return { ...state, count: state.count + 1 } default: return state; } }
// 组件代码 function App() { const [state, dispatch] = useReducer(myReducer, { count: 0 }); return ( <div className="App"> <button onClick={() => dispatch({ type: 'countUp' })}> +1 </button> <p>Count: {state.count}</p> </div> ); }
- 由于 Hooks 可以提供共享状态和 Reducer 函数,所以它在这些方面可以取代 Redux。它目前无法取代的是:提供中间件(middleware)和时间旅行(time travel)。
useEffect():副作用钩子
- useEffect() 用来引入具有副作用的操作,最常见的就是向服务器请求数据。以前放在 componentDidMount 里面的代码,现在可以放在 useEffect()。
useEffect(() => { // Async Action }, [dependencies])
- useEffect() 接受两个参数,第一个参数是一个函数,异步操作的代码放在里面。第二个参数是一个数组,用于给出 Effect 的依赖项,只要这个数组发生变化,useEffect() 就会执行。(第二个参数可以省略,这时每次组件渲染时,就会执行 useEffect() )。
const Person = ({ personId }) => { const [loading, setLoading] = useState(true); const [person, setPerson] = useState({}); useEffect(() => { setLoading(true); fetch(`https://swapi.co/api/people/${personId}/`) .then(response => response.json()) .then(data => { setPerson(data); setLoading(false); }); }, [personId]) if (loading === true) { return <p>Loading ...</p> } return <div> <p>You're viewing: {person.name}</p> <p>Height: {person.height}</p> <p>Mass: {person.mass}</p> </div> }
上面代码中,每当组件参数
personId
发生变化,useEffect()
就会执行。组件第一次渲染时,useEffect()
也会执行。
创建自己的 Hooks
- 可以把 Hooks 代码封装成一个自定义的 Hook,便于共享。
const usePerson = (personId) => { const [loading, setLoading] = useState(true); const [person, setPerson] = useState({}); useEffect(() => { setLoading(true); fetch(`https://swapi.co/api/people/${personId}/`) .then(response => response.json()) .then(data => { setPerson(data); setLoading(false); }); }, [personId]); return [loading, person]; };
上面代码中,
usePerson()
就是一个自定义的 Hook。const Person = ({ personId }) => { const [loading, person] = usePerson(personId); if (loading === true) { return <p>Loading ...</p>; } return ( <div> <p>You're viewing: {person.name}</p> <p>Height: {person.height}</p> <p>Mass: {person.mass}</p> </div> ); };
Person 组件就改用这个新的钩子,引入封装的逻辑。