반응 후크란 무엇입니까?
- 青灯夜游원래의
- 2022-03-21 18:58:448037검색
10개의 반응 후크가 있습니다. 1. 상태를 설정하고 변경하는 데 사용되는 useMemo, 3. 구성 요소에 값을 전송하는 데 사용되는 useContext, 4. useDebugValue, 사용자 정의 라벨, 5, useCallback 등.
이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
React Hook이란 무엇인가요?
React 공식 웹사이트에서는 다음과 같이 소개합니다. Hook은 React 16.8의 새로운 기능입니다. 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다.
완전히 선택 사항기존 코드를 다시 작성하지 않고도 일부 구성 요소에서 Hooks를 사용해 볼 수 있습니다. 하지만 원하지 않는다면 지금 당장 Hooks를 배우거나 사용할 필요는 없습니다.
100% 이전 버전과 호환됩니다. Hook에는 주요 변경 사항이 포함되어 있지 않습니다.
지금 사용 가능 Hook이 v16.8.0에서 출시되었습니다.
React에서 클래스를 제거할 계획은 없습니다. 이 페이지 하단 섹션에서 Hooks의 진보적 전략에 대해 자세히 알아볼 수 있습니다.
Hook은 React 개념에 대한 이해에 영향을 미치지 않습니다.반대로 Hook은 알려진 React 개념(props, state, context, refs 및 lifecycle)에 대한 보다 직접적인 API를 제공합니다. 나중에 살펴보겠지만 Hooks는 이들을 결합하는 더욱 강력한 방법도 제공합니다.
React에 대해 충분히 모른다면 공식 React 문서를 먼저 읽고 데모를 작성한 다음 기사를 읽는 것이 좋습니다. 왜냐하면 자세한 내용을 다루지 않고 React에 대한 몇 가지 기본 사항을 간략하게 다룰 것이기 때문입니다. .
react 공식 문서 https://zh-hans.reactjs.org/docs/hooks-state.html
Hook 제공 React
| hook | Usage |
|---|---|
| useState | 설정 및 변경 state를 대체하고 원래 상태를 대체하고 setState |
| useEffect | 원래 라이프 사이클을 대체하여, componentDidMount, componentDidUpdate 및 componentWillUnmount |
| useLayoutEffect | 의 병합 버전은 useEffect와 동일한 효과를 갖지만 효과를 동기식으로 호출합니다. |
| useMemo | 상태 변화에 따라 메소드 실행을 제어하고 값 전송을 최적화할 수 있는 제어 구성요소 업데이트 조건 |
| useCallback | useMemo는 값 전송을 최적화하고, usecallback은 업데이트 여부에 따라 전송 메소드를 최적화합니다 |
| useRef | 이전 참조와 동일하고 동일하며 더 간결합니다 |
| useContext | Context 및 더 깊은 구성요소가 값을 전달합니다 |
| useReducer | 는 원래 redux의 리듀서를 대체하고 useContext |
| useDebugValue | 사용자 정의 후크의 레이블은 디버깅을 위해 개발자 도구에 표시됩니다. |
| useImperativeHandle | 을 사용하면 ref를 사용할 때 상위 구성 요소에 노출되는 인스턴스 값을 사용자 정의할 수 있습니다. |
1.useState
import React from 'react';
import './App.css';
//通常的class写法,改变状态
class App extends React.Component {
constructor(props){
super(props)
this.state = {
hook:'react hook 是真的好用啊'
}
}
changehook = () => {
this.setState({
hook:'我改变了react hook 的值'
})
}
render () {
const { hook } = this.state
return(
<header className="App-header">
{hook}
<button onClick={this.changehook}>
改变hook
</button>
</header>
)
}
}
export {App}
//函数式写法,改变状态
function App() {
//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’
const [hook, sethook] = useState("react hook 是真的好用啊");
return (
<header className="App-header">
{hook}{/**这里的变量和方法也是可以直接使用的 */}
<button onClick={() => sethook("我改变了react hook 的值")}>
改变hook
</button>
</header>
);
}
export {App}
//箭头函数的函数写法,改变状态
export const App = props => {
const [hook, sethook] = useState("react hook 是真的好用啊");
return (
<header className="App-header">
{hook}
<button onClick={() => sethook("我改变了react hook 的值")}>
改变hook
</button>
</header>
);
}; 사용법 참고 사항은 위의 데모에 있습니다
위의 useState의 비교 사용을 읽은 후 작은 데모는 js 코드를 작성하고 이를 프로젝트 인, 정말 멋지지 않을까요?
2.useEffect & useLayoutEffect
useEffect는 원래 라이프 사이클, 즉 componentDidMount, componentDidUpdate 및 componentWillUnmount
의 병합 버전을 대체합니다. useEffect( ()=>{ return ()=>{ } } , [ ])
- 첫 번째 매개변수는 기본적으로 처음으로 렌더링 및 업데이트할 때 트리거됩니다. 기본적으로 함수를 반환한다는 것은 일부 항목이 삭제되기 전에 처리될 수 있음을 의미합니다. 두 번째 매개변수는 배열([])입니다. 비어 있으면 한 번만 실행되고 업데이트 시 트리거되지 않습니다. 매개변수가 여러 번 변경되면 UseEffect가 실행됩니다. UseLayoutEffect는 동기식으로 실행되어야 하며 먼저 useLayoutEffect
import React, { useState, useEffect, useLayoutEffect } from 'react'; //箭头函数的写法，改变状态 const UseEffect = (props) => { //创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’ const [ hook, sethook ] = useState('react hook 是真的好用啊'); const [ name ] = useState('baby张'); return ( <header className="UseEffect-header"> <h3>UseEffect</h3> <Child hook={hook} name={name} /> {/**上面的变量和下面方法也是可以直接使用的 */} <button onClick={() => sethook('我改变了react hook 的值' + new Date().getTime())}>改变hook</button> </header> ); }; const Child = (props) => { const [ newhook, setnewhook ] = useState(props.hook); //这样写可以代替以前的componentDidMount，第二个参数为空数组，表示该useEffect只执行一次 useEffect(() => { console.log('first componentDidMount'); }, []); //第二个参数，数组里是hook,当hook变化时，useEffect会触发，当hook变化时，先销毁再执行第一个函数。 useEffect( () => { setnewhook(props.hook + '222222222'); console.log('useEffect'); return () => { console.log('componentWillUnmount '); }; }, [ props.hook ] ); //useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数 useLayoutEffect( () => { console.log('useLayoutEffect'); return () => { console.log('useLayoutEffect componentWillUnmount'); }; }, [ props.hook ] ); return ( <div> <p>{props.name}</p> {newhook} </div> ); }; export default UseEffect;
3. useMemo 및 useCallback
둘 다 하위 구성 요소의 렌더링 문제를 최적화하는 데 사용할 수 있습니다. 과거에는 매우 흔했던 이벤트를 처리하기 위해 하위 구성 요소 상태 변경을 수신합니다. shouldComponentUpdate는 변경 사항이 있는지 모니터링할 수 있지만 다른 외부 메서드를 제어할 수 없기 때문에 수행하기 어렵습니다. 업데이트 후에만 실행되므로 렌더링이 완료되기 전에 작업을 수행하는 것은 좋지 않습니다. useCallback은 아직 지원되지 않습니다
import React, { useState, useMemo } from 'react';
const Child = ({ age, name, children }) => {
//在不用useMemo做处理的时候，只要父组件状态改变了，子组件都会渲染一次，用了useMemo可以监听某个状态name，当name变化时候执行useMemo里第一个函数
console.log(age, name, children, '11111111');
function namechange() {
console.log(age, name, children, '22222222');
return name + 'change';
}
{/** react 官网虽说useCallback与useMemo的功能差不多，但不知道版本问题还怎么回是，这个方法目前还不能用
const memoizedCallback = useCallback(
() => {
console.log('useCallback')
},
[name],
);
console.log(memoizedCallback,'memoizedCallback')
*/}
//useMemo有两个参数，和useEffect一样，第一个参数是函数，第二个参数是个数组，用来监听某个状态不变化
const changedname = useMemo(() => namechange(), [ name ]);
return (
<div style={{ border: '1px solid' }}>
<p>children：{children}</p>
<p>name：{name}</p>
<p>changed：{changedname}</p>
<p>age：{age}</p>
</div>
);
};
const UseMemo = () => {
//useState 设置名字和年龄，并用2两个按钮改变他们，传给Child组件
const [ name, setname ] = useState('baby张');
const [ age, setage ] = useState(18);
return (
<div>
<button
onClick={() => {
setname('baby张' + new Date().getTime());
}}
>
改名字
</button>
<button
onClick={() => {
setage('年龄' + new Date().getTime());
}}
>
改年龄
</button>
<p>
UseMemo {name}：{age}
</p>
<Child age={age} name={name}>
{name}的children
</Child>
</div>
);
};
export default UseMemo;4.useRef
ref는 이전과 거의 동일하며, useRef 생성 – 바인딩 – 사용, 3단계, 코드와 주의사항을 자세히 읽어주세요
import React, { useState, useRef } from 'react';
const UseRef = () => {
//这里useState绑定个input,关联一个状态name
const [ name, setname ] = useState('baby张');
const refvalue = useRef(null);// 先创建一个空的useRef
function addRef() {
refvalue.current.value = name; //点击按钮时候给这个ref赋值
// refvalue.current = name //这样写时，即使ref没有绑定在dom上，值依然会存在创建的ref上，并且可以使用它
console.log(refvalue.current.value);
}
return (
<div>
<input
defaultValue={name}
onChange={(e) => {
setname(e.target.value);
}}
/>
<button onClick={addRef}>给下面插入名字</button>
<p>给我个UseRef名字：</p>
<input ref={refvalue} />
</div>
);
};
export default UseRef;
5. useContext
이전에 context를 사용해본 친구들은 한눈에 이해할 수 있을 것입니다. useContext의 기본 사용법은 이전 context와 유사합니다. 코드, 생성, 값 전달, 사용import React, { useState, useContext, createContext } from 'react';
const ContextName = createContext();
//这里为了方便写博客，爷爷孙子组件都写在一个文件里，正常需要在爷爷组件和孙子组件挨个引入创建的Context
const UseContext = () => {
//这里useState创建一个状态，并按钮控制变化
const [ name, setname ] = useState('baby张');
return (
<div>
<h3>UseContext 爷爷</h3>
<button
onClick={() => {
setname('baby张' + new Date().getTime());
}}
>
改变名字
</button>
{/**这里跟context用法一样，需要provider向子组件传递value值，value不一定是一个参数 */}}
<ContextName.Provider value={{ name: name, age: 18 }}>
{/**需要用到变量的子组件一定要写在provider中间，才能实现共享 */}
<Child />
</ContextName.Provider>
</div>
);
};
const Child = () => {
//创建一个儿子组件，里面引入孙子组件
return (
<div style={{ border: '1px solid' }}>
Child 儿子
<ChildChild />
</div>
);
};
const ChildChild = () => {
//创建孙子组件，接受爷爷组件的状态，用useContext,获取到爷爷组件创建的ContextName的value值
let childname = useContext(ContextName);
return (
<div style={{ border: '1px solid' }}>
ChildChild 孙子
<p>
{childname.name}:{childname.age}
</p>
</div>
);
};
export default UseContext;
6에 자세한 설명이 있습니다. useReducer
여기서 usereducer는 상태를 반환하고 이를 컨텍스트를 통해 하위 구성 요소에 전달한 다음 상태를 직접 호출하거나 감속기를 트리거합니다. 우리는 종종 reudx의 값 전송 및 재할당 작업을 시뮬레이션하기 위해 useContext createContext와 함께 useReducer를 사용합니다. .import React, { useState, useReducer, useContext, createContext } from 'react';
//初始化stroe的类型、初始化值、创建reducer
const ADD_COUNTER = 'ADD_COUNTER';
const initReducer = {
count: 0
};
//正常的reducer编写
function reducer(state, action) {
switch (action.type) {
case ADD_COUNTER:
return { ...state, count: state.count + 1 };
default:
return state;
}
}
const CountContext = createContext();
//上面这一段，初始化state和reducer创建context,可以单独写一个文件，这里为了方便理解，放一个文件里写了
const UseReducer = () => {
const [ name, setname ] = useState('baby张');
//父组件里使用useReducer,第一个参数是reducer函数，第二个参数是state，返回的是state和dispash
const [ state, dispatch ] = useReducer(reducer, initReducer);
return (
<div>
UseReducer
{/* 在这里通过context，讲reducer和state传递给子组件*/}
<CountContext.Provider value={{ state, dispatch, name, setname }}>
<Child />
</CountContext.Provider>
</div>
);
};
const Child = () => {
//跟正常的接受context一样，接受父组件的值，通过事件等方式触发reducer，实现redux效果
const { state, dispatch, name, setname } = useContext(CountContext);
function handleclick(count) {
dispatch({ type: ADD_COUNTER, count: 17 });
setname(count % 2 == 0 ? 'babybrother' : 'baby张');
}
return (
<div>
<p>
{name}今年{state.count}岁
</p>
<button onClick={() => handleclick(state.count)}>长大了</button>
</div>
);
};
export default UseReducer;【관련 추천: Redis 비디오 튜토리얼
】
위 내용은 반응 후크란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：반응 비계란 무엇입니까?다음 기사：반응 비계란 무엇입니까?