const [text, setText] = useState(0);
初始化text=0;setText是唯一能够改变text值的方法,类似state与setState的关系。
涉及到组件传值,在父组件使用export const TextContext = createContext();
在return时,
<div>
<div>
<Search placeholder="Todo Info" enterButton="提交" onSearch={value => getValue(value)} />
<div>{text}</div>
<TextContext.Provider value={text}>
<Test />
</TextContext.Provider>
</div>
</div>
使用TextContext.Provider包裹需要传值的子组件,所传的值为value。
在子组件中,import { TextContext } from './useStateexp';先引入TextContext;
然后再函数中使用 const text = useContext(TextContext);引入父组件所传入的变量
const Test = () => {
const text = useContext(TextContext);
return (
<div>
.......
</div>
);
};
在改变值的时候,值为数组,需要用...运算符进行赋值。
const [text, setText] = useState(Array);
const getValue = value => {
setText([...text, value]);
};
踩坑,在用useState操作数组时,一定要用...进行数组操作,不然页面不会更新。
const UseStateexp = () => {
const [text, setText] = useState(Array);
const getValue = value => {
setText([...text, value]);
};
const deleteTodo = value => {
setText([...value]);
};
}
每次 render 之后都会执行 useEffect,如果想要useEffect只执行一次,需要useEffect(()=>{},[]),useEffect第二个参数传入一个空数组,可以使其只执行一次。
一个函数中可以包含多个 useEffect 如:
function FriendStatusWithCounter(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
// ...
}