React 16.8부터 React 연결이 해제되었습니다.대부분의 개발자들은 이런'신규'API를 사랑하지만, 일부 개발자들은 여전히 좋은'구'류로 구성 요소를 작성하는 것을 좋아한다.
나는 거의 발표 때부터 이 API를 사용하기 시작했고, 나도 내가 갈고리 마니아라고 생각한다.그래서 좋은 점은 클래스가 없는 구성 요소를 작성하면 코드를 읽을 수 있다는 것을 의미한다고 생각합니다.이것 또한 더 적은 코드를 초래할 수 있다. 이것은 하루가 끝날 때 더 적은 버그를 의미한다.

React팀은 개발자가 예쁜 React 응용 프로그램을 구축할 때 필요할 수 있는 모든 용례를 포함하는 대량의 작업을 했다.그러나 갈고리로 React 응용 프로그램을 구축할 때 저는 보통 기본적인 갈고리만 사용합니다. 예를 들어useState,useffect,useRef입니다. 더 복잡한 구성 요소에서는useContext,useReducer,useMemo를 사용할 수 있습니다.

연결 API 자, 이제 장사 얘기를 시작하겠습니다. 코드를 좀 봅시다.😍!

처음에 내가 useState 갈고리를 사용했을 때, 나는 단일 구성 요소에서 많은 원시 상태 변수를 성명한 것을 발견했다.
간단하게 말하자면, 우리는 이러한 입력이 매우 드물다는 통제 형식의 예시를 고려해야 한다.

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");

  return (
    <form>
      <label>Name</label>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <label>Email</label>
      <input
        type="text"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <label>Phone</label>
      <input
        type="text"
        value={phone}
        onChange={e => setPhone(e.target.value)}
      />
    </form>
  );
}

export default App;

위의 표는 상태의 기본 용법의 간단한 예이다.모든 필드는 갈고리가 만든 단독 변수에 설명되며, 이 값은 단독setter 함수에 의해 제어됩니다.
그래, 그런데 이게 무슨 문제야?
나는 아무 말도 하지 않는다.) 우리는 과거로 돌아가서 같은 구성 요소를 살펴보자. 그러나 교실에서의 방법은 이렇다.

class App extends Component {
  state = {
    name: "",
    email: "",
    phone: ""
  };

  render() {
    return (
      <form>
        <label>Name</label>
        <input
          type="text"
          value={this.state.name}
          onChange={e => this.setState({ name: e.target.value })}
        />
        <label>Email</label>
        <input
          type="text"
          value={this.state.email}
          onChange={e => this.setState({ email: e.target.value })}
        />
        <label>Phone</label>
        <input
          type="text"
          value={this.state.phone}
          onChange={e => this.setState({ phone: e.target.value })}
        />
      </form>
    );
  }
}

export default App;

보시다시피 그것들은 매우 비슷하고 특별한 차이도 없습니다. 단지 class 키워드와 render 방법을 사용했을 뿐입니다. 맞습니까?하지만 나에게 또 한 가지는 이런 방법으로 부품을 만드는 것이 더 편리하다는 것이다.
예, 이것은 하나의 함수this.setState를 통해서만 상태를 제어하고 하나의 속성this.state을 통해서만 상태를 접근합니다.이 작은 물건은 클래스 구성 요소에 있어서 매우 좋다. 나는React의 함수 세계에서 많은 것을 놓쳤다.
왜 그러냐고요?
처음에 상태가 잘 알려지지 않은 구성 요소를 인코딩하고 인코딩하는 과정에서 상태 속성을 추가하거나 이름을 바꾸거나 삭제한다고 가정하십시오.
예를 들어 상태 속성을 추가할 때, 나는 자신의 이름과setter 함수로 새로운 변수를 정의해야 한다.return에서, 나는 접근 값을 사용하고 단독 setter를 사용하여 갈고리의 상태를 제어해야 한다.더 많은 상태 값을 정의할 때 구성 요소에 비상분수와 중복된 외관을 부여합니다. 특히 const 및 useState 키워드를 사용합니다.
새 상태 값을 추가하는 차이점은 다음과 같습니다.

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
+  const [address, setAddress] = useState("");
+  const [bio, setBio] = useState("");

만약 우리가 이것이 단지 다섯 개의 속성만 있는 구성 요소 상태의 정의라고 생각한다면.내가 보기에는 중복되어 보이는 코드가 많은데, 특히 아래에 표시된 클래스 상태 정의에 비하면.

  state = {
    name: "",
    email: "",
    phone: "",
+   address: "",
+   bio: "",
  };

이런 상황에서 상태 정의는 명확하고 이해하기 쉬운 구조를 가지고 중복 코드가 없다.나에게 있어서 주요한 게임 규칙 변화자는 모든 상태 속성은 한 곳에서 접근할 수 있고 하나의 함수로 설정할 수 있다는 것이다.
사람들은 이것이 하나의 구성 부분의 유일한 진상 원천과 같다고 말할 수 있다.여기가 바로 내가 그것을 좋아하는 곳이다.
Redux
많은 변수를 설명하고 접근하는 것은 내가 useSetState 라는 사용자 정의 갈고리를 생각해 낼 때까지 오랫동안 곤혹스러웠다.
아래의 행동을 봐라.

function App() {
  const [state, setState] = useSetState({
    name: "",
    email: "",
    phone: ""
  });

  return (
    <form>
      <label>Name</label>
      <input
        type="text"
        value={state.name}
        onChange={e => setState({ name: e.target.value })}
      />
      <label>Email</label>
      <input
        type="text"
        value={state.email}
        onChange={e => setState({ email: e.target.value })}
      />
      <label>Phone</label>
      <input
        type="text"
        value={state.phone}
        onChange={e => setState({ phone: e.target.value })}
      />
    </form>
  );
}

export default App;

와!🤩! 주 전체에 갈고리가 하나밖에 없단 말인가?한 곳에서 컨트롤?클래스를 사용하지 않습니까?이거 대박!
이 사용자 정의 갈고리를 정의하는 순간부터 나는 일반적인 갈고리 useState 를 사용하지 않았다. (나는 거짓말을 하고 있다... 트리거 등 매우 간단한 구성 요소에 사용한다.) 상태를 저장해야 할 때마다 나는 그것을 사용하기 시작했다.
이 갈고리는 내 코드만 가져왔다.

중복 모양 감소

액세스 및 제어 상태의 유연성 향상

상태 변경을 보다 쉽게 처리할 수 있음

기능 구성 요소의 클래스 상태의 장점.

이 맞춤형 갈고리가 어떤 모양인지 알고 싶어요?🤔 ?

const useSetState = (initialState = {}) => {
  const [state, regularSetState] = useState(initialState);

  const setState = newState => {
    regularSetState(prevState => ({
      ...prevState,
      ...newState
    }));
  };

  return [state, setState];
};

이것은 일반적인 useState 갈고리를 가진 간단한 사용자 정의 갈고리일 뿐이다.기본적으로 useState 갈고리 소지 대상.그리고 정의된 setState 에서 함수는 regularSetState 라고 불리는 일반적인 setter 함수를 호출합니다. 그러나 원시 변수를 상태에 분배하는 것이 아니라 이전 상태 대상과 새로운 상태 대상의 합병 대상을 분배합니다.이러한 동작은 하나의 상태 대상에 여러 개의 값을 저장하고 함수로 설정합니다.이렇게 간단하지만 이렇게 강하다.

결론

물론 내가 이렇게 갈고리를 조정한 것은 이번이 처음이 아니다.이것은 심지어 정확한 처리 방식도 아닐지 모르지만, 그것은 나에게 매우 효과적이다. 나는 그것을 좋아한다.어쩌면 이것도 너에게 유용할지도 모른다.