놓칠 수 있는 힌트와 기교를 반영해 주세요.

아마존에서 내 책 보기https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
React는 현대 인터랙티브 전방 웹 응용 프로그램을 구축하는 데 가장 자주 사용하는 전방 라이브러리입니다.모바일 응용 프로그램을 구축하는 데도 사용할 수 있다.본고에서 우리는 React를 사용하여 응용 프로그램을 더욱 쉽게 구축할 수 있는 기교와 요령을 소개할 것이다.

기능 구성 요소에서 React 갈고리 사용
연결고리는 기능 구성 요소를 지능적으로 만든다.만약 연결이 없다면, 우리는 기능 구성 요소로만 데이터를 표시할 수 있습니다.이것이 바로 그것들도 무상태 구성 요소라고 불리는 이유다.갈고리가 생기면 그것들은 자신의 내부 상태와 방법을 가지고 있어서 그것들을 더욱 유용하게 한다.
예를 들어, 다음과 같이 갈고리가 있는 어셈블리를 작성할 수 있습니다.

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>{count}</p>
    </div>
  );
}

위 코드에는 내장된ReactuseState 갈고리가 있는데 count 함수 변경setCount 상태를 사용할 수 있습니다.
우리는 setCount 프로세서처럼 매개 변수 호출 onClick 을 사용하여 값을 업데이트합니다.
보기에 매우 간단하다.우리는 클래스 구성 요소를 대하는 것처럼 인용할 필요가 없다. this 따라서 클래스 구성 요소를 대하는 것처럼 bind 호출해서 정확한 this 를 설정할 필요가 없다.
이게 더 깨끗해.우리는 또한 자신의 갈고리를 작성하여 자신의 방식으로 데이터를 업데이트할 수 있다.
기능 어셈블리는 라이프 사이클 메소드에 액세스할 수 없으므로 스마트 기능 어셈블리를 만드는 방법입니다.

React 컨텍스트 API를 사용하여 도구 전달
React context API를 사용하면 관련되지 않은 구성 요소 간에 데이터를 전달할 수 있습니다.함수 구성 요소에 대해 우리는 createContext 방법으로 상하문을 만들 수 있다.우리는 되돌아오는 구성 요소를 사용하여 그들이 서로 데이터를 공유하기를 원하는 구성 요소를 포장할 수 있다.
그리고 우리는 그들 사이에서 우리가 원하는 모든 데이터를 전달할 수 있다.소통은 여전히 하나의 방식이다.데이터는 상하문 공급자로부터 사용자에게 전달된다.
예를 들어 우리는 다음 코드를 작성하여 그들 사이에서 데이터를 전달할 수 있다.

import React from "react";
const CountContext = React.createContext(0);

function Count() {
  const count = React.useContext(CountContext);
  return <p>{count}</p>;
}

export default function App() {
  const [count, setCount] = React.useState(0);
  return (
    <CountContext.Provider value={count}>
      <div className="App">
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <Count />
      </div>
    </CountContext.Provider>
  );
}

위 코드에서, 우리는 React.createContext 구성 요소와 데이터를 공유할 수 있도록 React with Count 를 만들었습니다.
우리는 CountContext.Provider 구성 요소를 사용하여 그것을 모든 내용에 감쌌다.그리고 우리는 count 변수를 valueprop의 값으로 전송할 것이다. 이것은 호출React.useContext의 모든 구성 요소와 공유하고 CountContext.Provider 구성 요소에 위치할 것이다.
그리고 Count에서 우리는 React.useContext를 호출하여 CountContext에 전달했다.따라서 count는 App 도구를 통해Count 중의 value에서 전달하고Count에서 렌더링한다.
따라서 증가분을 클릭하면 count 값이 증가합니다.

스타일 지정 어셈블리
React를 사용하면 JS에서 CSS 값을 쉽게 설정할 수 있습니다.따라서 어셈블리 내부에서 CSS를 사용하여 스타일화된 어셈블리를 직접 포함할 수 있습니다.
우리는 style-components 라이브러리를 사용하여 양식화된 구성 요소를 쉽게 만들 수 있다.템플릿 레이블을 사용하여 가져온 CSS 문자열을 하나의 구성 요소로 변환할 수 있습니다.
예를 들어 다음과 같은 내용을 쓸 수 있습니다.

import React from "react";
import styled from "styled-components";

const Div = styled.div`
  background: ${props => (props.primary ? "green" : "white")};
  color: ${props => props.color};

margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid green;
`;

export default function App() {
  return (
    <div className="App">
      <Div background="green" color="white" primary={true}>
        foo
      </Div>
    </div>
  );
}

위의 코드에는 템플릿 문자열props이 있는데 이것은 우리가 구성 요소를 사용할 때 전달하는 도구입니다.style.div는 템플릿 표시입니다.템플릿 탭은 템플릿 문자열을 수신하고 우리의 선택에 따라 일부 대상을 되돌려주는 함수입니다.
이 예에서, 우리는 양식화된 구성 요소를 되돌려줍니다.style.divdiv를 되돌려줍니다. 저희 하드코딩이나 도구에 따라 설정된 유형을 포함합니다.
그리고 Div 에서 App 인용할 때, 흰색 텍스트가 있는 녹색 상자를 볼 수 있습니다. color 속성으로 지정한 것처럼.우리가 지정한 primary 아이템의 값은 true이기 때문에 style-component 배경색을 녹색으로 설정합니다.

결론
hooks API는 React 구성 요소를 더욱 깨끗하고 이해하기 쉽게 만듭니다.그것은 우리로 하여금 기능 구성 요소를 지능적으로 변화시킬 수 있게 한다.Dell은 this 또는 수명 주기 연결의 가치를 더 이상 걱정할 필요가 없습니다.
컨텍스트 API는 관계와 관계없이 두 어셈블리 간에 데이터를 공유하는 데 유용합니다.우리는 useContext 갈고리를 사용하여 공유할 수 있다.
마지막으로 styled-components 라이브러리는 템플릿 라벨을 덧붙여서 스타일링 구성 요소를 쉽게 만들 수 있습니다.