标签：this onclick turn item hooks code chat lun change
React Hooks: let you use React without classes.（对于已有的使用class定义的React组件，官方不推荐全部重写。可将react hooks用于新创建的React组件）。
使用class定义React component有什么弊端：a. this指向不明确； b. 定义的handle函数需要bind
1. useState:接受的唯一参数为初始化的state值（仅在首轮render中被使用，不一定是object类型）。 返回一对参数：第一个为当前的state，第二个为其更新函数。
function ExampleWithManyStates() { // Declare multiple state variables! const [age, setAge] = useState(42); const [fruit, setFruit] = useState(‘banana‘); const [todos, setTodos] = useState([{ text: ‘Learn Hooks‘ }]); // ... }
这里，与使用class定义的component在写法上进行对比。
class Example extends React.Component { constructor (props) { super(props); this.setState = { age: 42, fruit: ‘banana‘, todos: [{ text: ‘React Hooks‘ }] }; } render () { return .... } }
2. useEffects
何为effects(效应)？affect other components and can’t be done during rendering.如fetch data, subscribe, manually changing the DOM.
useEffects起到了与React classes中 componentDidMount, componentDidUpdate, componentWillUnmount相同的作用，但只不过是统一于一身。React默认是在每次render之后去调用effects函数。（包括首轮render）
import React, { useState, useEffect } from ‘react‘;
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
3. 使用hooks的规则
4. 使用自定义hooks，特点：1. 以use开头 2. 在其中调用其他hooks
作用： 重用状态逻辑（stateful logic)
import React, { useState, useEffect } from ‘react‘;
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
// 传入props后，isOnline被设为true.
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
// 返回
return isOnline;
}
在两个组件中重用。
function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { return ‘Loading...‘; } return isOnline ? ‘Online‘ : ‘Offline‘; }
function FriendListItem(props) { const isOnline = useFriendStatus(props.friend.id); return ( <li style={{ color: isOnline ? ‘green‘ : ‘black‘ }}> {props.friend.name} </li> ); }
5. 其他内置hooks API
5.1 useContext
5.2 useReducer
标签：this onclick turn item hooks code chat lun change
原文地址：https://www.cnblogs.com/ceceliahappycoding/p/12433492.html
