hooks의 출현으로 함수식 구성 요소가 생명주기가 없는 아픔을 해결했고 새로운 구덩이도 우리를 기다리고 있다
첫 번째 구덩이를 만났을 때 react-hot-loader hoosk react-hot-loader의 그 babel 플러그인 문제가 일부 문법을 해석하는 데 특수한 처리를 했을 수 있기 때문이다.

class Component와 function Component의 차이

Function 쓰기 구성 요소에 대해 알아야 하는 이유는 무엇입니까?점점 중요해지고 있기 때문이다.그러면 React에서 Function Component와 Class Component는 어떻게 다릅니까?Capture props (props )
아래 두 단락의 코드를 비교하다.
class Component

import React from 'react';

class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={ this.handleClick }>Follow</button>;
  }
}

export default ProfilePage;

function Component

import React from 'react';

function ProfilePage(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={ handleClick }>Follow</button>
  );
}

export default ProfilePage;

이 두 구성 요소는 모두 같은 논리를 설명합니다. 단추를 누르면 3초 후alert 부급이 전송하는 사용자 이름입니다.
상위 어셈블리 코드

import React from "react";
import ReactDOM from "react-dom";

import ProfilePageFunction from './ProfilePageFunction';
import ProfilePageClass from './ProfilePageClass';

class App extends React.Component{

  state = {
    user: 'Dan',
  };

  render() {
    return (
      <>
        <label>
          <b>Choose profile to view: </b>
          <select
            value={this.state.user}
            onChange={e => this.setState({ user: e.target.value })}
          >
            <option value="Dan">Dan</option>
            <option value="Sophie">Sophie</option>
            <option value="Sunil">Sunil</option>
          </select>
        </label>
        <h1>Welcome to { this.state.user }’s profile!</h1>
        <p>
          <ProfilePageFunction user={ this.state.user } />
          <b> (function)</b>
        </p>
        <p>
          <ProfilePageClass user={ this.state.user } />
          <b> (class)</b>
        </p>
        <p>
          Can you spot the difference in the behavior?
        </p>
      </>
    )
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

실행 결과는class Component가 받을 때마다 상위 구성 요소가 바뀐 상태이고,function Component는 이전의 상태를 바꾼 것입니다.
그러면 React 문서에 기술된 props는 변할 수 없는 데이터가 아닙니까?왜 운행할 때 또 변화가 일어날까요?
왜냐하면,props는 변하지 않지만,this는 Class Component에서 변하기 때문에,this.props의 호출은 매번 최신props에 접근할 수 있습니다.
Function Component에는 이 기능이 없습니다.props의 문법 때문에 props는 항상 변할 수 없습니다.

Hooks도 capture value 특성을 가지고 있습니다.

function MessageThread() {
  const [message, setMessage] = useState("");

  const showMessage = () => {
    alert("You said: " + message);
  };

  const handleSendClick = () => {
    setTimeout(showMessage, 3000);
  };

  const handleMessageChange = e => {
    setMessage(e.target.value);
  };

  return (
    <>
      <input value={message} onChange={handleMessageChange} />
      <button onClick={handleSendClick}>Send</button>
    </>
  );
}

Send 단추를 눌렀을 때 입력 상자의 값을 다시 수정합니다. 3초 후의 출력은 여전히 누르기 전의 입력 상자의 값입니다.이것은 Hooks도 마찬가지로 capture value의 특성을 가지고 있다는 것을 설명한다 useRef capture value

function MessageThread() {
    const latestMessage = useRef("");
  
    const showMessage = () => {
      alert("You said: " + latestMessage.current);
    };
  
    const handleSendClick = () => {
      setTimeout(showMessage, 3000);
    };
  
    const handleMessageChange = e => {
      latestMessage.current = e.target.value;
    };

    return (
      <>
        <input onChange={handleMessageChange} />
        <button onClick={handleSendClick}>Send</button>
      </>
    );
}

React.PureComponent
솔직히 Function Component가 Pure Component를 대체하는 방안은 Class Component가 우아하지 않다. 코드는 다음과 같다.

const Button = React.memo(props => {
  // your component
});

React.memo는 더 높은 단계의 구성 요소입니다.그것은 React와 유사합니다.클래스가 아닌 PureComponent 기능 구성 요소기본적으로,props 대상의 복잡한 대상만 간단하게 비교할 수 있습니다.비교를 제어하려면 두 번째 매개 변수로 사용자 정의 비교 함수를 제공할 수도 있습니다. shouldComponentUpdate

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

componentDidUpdate
useEffect

function MessageThread() {
    useEffect(() => {
        let DOM  = document.getElementById("dom");
        console.log(DOM);
    });

    return (
      <>
        <input id="dom"/>
        <button> Send </button>
      </>
    );
}

useEffect useEffect 기본 동작은 렌더링이 완료될 때마다 촉발되지만, 어떤 경우에는 이 상황을 피하기 위해 두 번째 파라미터를 전달할 수 있습니다.

useEffect(() => {
    console.log(props);
     let DOM  = document.getElementById("dom");
     console.log(DOM);
},[props.test]);

이런 상황에서는 오직 프로가 될 뿐이다.테스트 값이 변경될 때 다시 렌더링됩니다.

통합 관리 State

const [ state, setState ] = useState({
    left: 0,
    top: 0,
    width: 100,
    height: 100
});
const handleClick = () => {
    setState( state =>({ ...state,width:300 }));
}

이전 props 가져오기

function MessageThread (){
    const [ count, setCount ] = useState(0);
    const prevCount = usePrevious(count);
    return (
      <h1>
        Now: {count}, before: {prevCount}
        <button onClick={()=>setCount(count+1)}> </button>
      </h1>
    );
  }
  
function usePrevious(value) {
    const ref = useRef();
    useEffect(() => {
        ref.current = value;
    });
    return ref.current;
}

이를 통해 알 수 있듯이 useEffect useRef를 합리적으로 활용하면 많은 일을 할 수 있을 뿐만 아니라 CustomHook으로 포장한 후에도 사용하기에 매우 편리하다

성능 고려 사항

useState 함수의 매개 변수는 초기 값이지만 전체 함수는 Render이기 때문에 초기화할 때마다 호출됩니다. 초기 값 계산에 시간이 많이 소모되면 함수를 사용하여 한 번만 실행하도록 권장합니다.

const [ state, setState ] = useState(()=>{ 
    console.log("init")
    return({
         left: 0,
         top: 0,
         width: 100,
         height: 100
     })
 });

참고 문헌
마지막 에 쓰여 있 는 wx wangchen 2018 0818 교류 를 환영 공부