React 의 hook 및 router

hook
역할:함수 식 구성 요소 에 state 를 추가 할 수도 있 고,일부 생명주기 갈고리 함 수 를 사용 할 수도 있 습 니 다.
useState useEffect

  import React,{ useState,useEffect } from 'react'


  const Item = ( props ) => {
    return   <li> { props.content } </li>
  }

  function HookComponent () {
    let  [count,setCount ] = useState( 0 )
    let [ list, setList ] = useState( [
      {
        id: 1,
        content: '   1'
      }
    ])

    // console.log( count , setCount )


    useEffect ( () => {
      //        
      document.title = count
    })

    return (
      <div>
        hook
        <button onClick = { () => { setCount( count += 1 ) }}> + </button>
        <p> { count } </p>
        <hr/>
        <button onClick = { () => {
          let newList = list.push({
            id: list.length + 1,
            content: 'Gabriel Yan'
          }) //       
          setList( list.concat(newList))
        }}> list +  </button>
        <ul>
          {
            list.map( item => {
              return <Item { ...item } key = { item.id} />
            })
          }
        </ul>
      </div>
    )
  }


  export default HookComponent

요약:

useState 는 함수 식 구성 요소 에서 state 와 state 를 수정 하 는 방법 let[count,setCount]=useState(count 의 초기 값)

를 정의 할 수 있 습 니 다.

useEffect 는 함수 식 구성 요소 에서 부작용(이벤트 구독,dom 작업)을 제거 하지 않 아 도 되 는 부작용 을 사용 할 수 있 습 니 다.React 에서 DOM 을 업데이트 한 후에 추가 코드 를 실행 하고 싶 습 니 다.예 를 들 어 네트워크 요청 을 보 내 고 DOM 을 수 동 으로 변경 하 며 로 그 를 기록 하 는 것 은 흔히 삭제 할 필요 가 없 는 작업

  import React, { useState, useEffect } from 'react';

  function Example() {
    const [count, setCount] = useState(0);

    useEffect(() => {
      document.title = `You clicked ${count} times`;
    });

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );

입 니 다.예 를 들 어 외부 데이터 원본 구독

  import React, { useState, useEffect } from 'react';

  function FriendStatus(props) {
    const [isOnline, setIsOnline] = useState(null);

    /* 
      useEffect(() => {
        //1.         

        return 2.         
      }) 
     */

    useEffect(() => {
      function handleStatusChange(status) {
        setIsOnline(status.isOnline);
      }

      ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
      // Specify how to clean up after this effect:
      return function cleanup() {
        ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
      };
    });

    if (isOnline === null) {
      return 'Loading...';
    }
    return isOnline ? 'Online' : 'Offline';
  }

react router 4.0 react-router-dom
React router 모드:

HashRouter

오래된 브 라 우 저의 history,hashchange 사건 을 통 해 url 의 변화 상황 을 감청 합 니 다

BrowserRouter

새로운 브 라 우 저의 history 는 H5 가 제공 하 는 createbrBrowserRouter 를 통 해 이 루어 지고 popstate 사건 을 감청 함으로써 이 루어 집 니 다

React router 네 개의 핵심 패키지
패키지 이름 설명 react-router React Router 핵심 api react-router-dom React Router 의 DOM 바 인 딩 은 브 라 우 저 에서 실행 되 며 react-router react-router-native React Native 를 추가 로 설치 하지 않 아 도 됩 니 다.실제 응용 에 서 는 이 를 사용 하지 않 습 니 다.react-router-config 정적 경로 설정
프로 세 스 데모 사용

의존 패키지 2 개 설치$ yarn add react-router react-router-dom

입구 파일 index.js 에서 router

   import { BrowserRouter as Router} from 'react-router-dom'
   ReactDOM.render(
     <Router>
       <App />
     </Router>
   , document.getElementById('root'));

를 사용 합 니 다.

Route 위의 속성

NavLink 경로 활성화

exact 경로 가 완전히 일치 하려 면 항상/home

리 셋 구성 요소 Redirect

경로(우리 가/category,점프/categor/1)경로 구성 요 소 는 componentWillReceiveProps componentDid Mount 를 통 해 경로 변 화 를 감청 할 수 있 습 니 다

App 구성 요 소 는 경로 구성 요소 가 아니 라 경로 의 변 화 를 감청 할 수 없습니다.비상 식적 인 수단 으로 App 구성 요 소 를 경로 구성 요소 로 바 꿉 니 다.

고급 구성 요소 withRouter 사용

스위치 는 반드시 써 야 합 니 다.한 번 에 하나의 구성 요소 만 렌 더 링 합 니 다.쓰 지 않 으 면 경로 구성 요소 가 모두 렌 더 링 됩 니 다

동적 경로

경로 전송 링크/navLink 구성 요소 의 to 속성 으로 to={pathname,search,hash,state}

경로 연결

id: this.props.match.params.id

search:먼저 query string 으로 search 를 object

로 변환 합 니 다.

  const qs = require('querystring')
  let { search } = this.props.location // '？a=1&b=2'
  const { a, b } = qs.parse( search.slice(1) )

state； this.props.location.state.xxx

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

nginx 에서 사이트 아이콘 표시 설정

전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

React 의 hook 및 router

좋은 웹페이지 즐겨찾기