React Hooks 프로젝트 실전

Hooks 소개Hooks는React v16.7.0-alpha에 추 가 된 새로운 특성 이다.그것 은 함수 구성 요소 로 하여 금 자신의state를 가지 게 할 수 있다.react 16.8.0안정 적 인 버 전 지원Hooks은 본 고 는 프레젠테이션Hooks이 프로젝트 에서 의 사용 예 시 를 보 여 주 는 것 이 고 내부 의 원리 에 대해 상세 하 게 설명 하지 않 는 다.
useState

import React, { useState  } from 'react';
function Example() {
    //       “count”      
    const [count, setCount] = useState(0);

    return (
        

            
You clicked {count} times
             setCount(count + 1)}>
                Click me
            
        
    );
}

export default Example;

useEffect

import React, { useEffect  } from 'react';
function Example() {
    //      componentDidMount
    useEffect(() => {
        console.log('componentDidMount')  
    },[]);
    //      componentDidMount
    useEffect(() => {
        console.log('componentDidMount')
        return ()=>{ //componentWillUnmount
            console.log('componentWillUnmount')
        }
    },[]);
    //      componentDidMount   componentDidUpdate
    useEffect(() => {
        console.log('    componentDidMount   componentDidUpdate:')
    });
    return (
        

    );
}

export default Example;

componentDidMount、componentDidUpdate、componentWillUnmount的使用方法

useMemo

import React, { useMemo  } from 'react';
export default ({a}) => {
    const exampleA = useMemo(() => 
{a}
, [a]);  // a             
    return exampleA
}

useRef

import React, { useRef  } from 'react';

export default ({a}) => {
    const inputEl = useRef(null);
    return 
}

react-router 경로 매개 변수 가 져 오기

import React from 'react';
import { withRouter } from 'react-router-dom';

export default withRouter((props) => {
    return 
{props.match.params.id}
})

react-redux 와 redux-saga 의 사용import React, { useEffect } from 'react'; import { connect } from 'react-redux'; const mapStateToProps = (state) => { return { list:state.list }; }; const mapDispatchToProps = (dispatch) => { return { getList:()=>{},// }; }; const useAddField = (props:Props) => { useEffect(()=>{ console.log('---------- ') this.props.list(); return ()=>{ console.log('------- ') } },[]) //componentDidMount console.log(props.list) //redux return }; export default connect(mapStateToProps, mapDispatchToProps)(useAddField);
참고 문서
리 액 트 홈 페이지
React Hooks FAQ
참고 블 로그