지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

당신이 눈치 채지 못했을 수도 있는 반응의 세부 사항! (요약)

青灯夜游
풀어 주다： 2021-02-11 08:55:53
앞으로
2260명이 탐색했습니다.

반응에서 이러한 세부 사항을 발견한 적이 있나요? 다음 기사에서는 여러분이 눈치채지 못했을 수도 있는 반응에 대한 몇 가지 세부 사항을 요약합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

당신이 눈치 채지 못했을 수도 있는 반응의 세부 사항! (요약)

[관련 튜토리얼 권장 사항: React 비디오 튜토리얼]

React의 일부 자세한 지식 포인트:

1 get in 컴포넌트 사용(클래스의 getter로)

ES6 지식: 클래스 클래스에는 다음과 같이 작성된 자체 getter 및 setter가 있습니다. 

Class Component {
     constructor() {
         super()
         this.name = ''
    }    
    
    // name的getter
    get name() {
        ...
    }

    // name的setter
    set name(value) {
        ...
   }
}
로그인 후 복사

get in React 구성 요소의 사용은 다음과 같습니다. 

/*
 *  renderFullName的getter 
 *  可以直接在render中使用this.renderFullName
 */ 

get renderFullName () {
  return `${this.props.firstName} ${this.props.lastName}`;
}

render() {
    return (
          <div>{this.renderFullName}</div>
    )   
}
로그인 후 복사

그렇다면 React 구성 요소에서 getter의 사용은 무엇입니까? ? 

constructor (props) {
    super()
    this.state = {};
  }

    
  render () {
    // 常规写法，在render中直接计算 
    var fullName = `${this.props.firstName} ${this.props.lastName}`;

    return (
      <div>
        <h2>{fullName}</h2>
      </div>
    );
  }
로그인 후 복사
// 较为优雅的写法:，减少render函数的臃肿
renderFullName () {
  return `${this.props.firstName} ${this.props.lastName}`;
}

render () {
  var fullName = this.renderFullName() 　 <div>{ fullName }</div> }
로그인 후 복사
// 推荐的做法：通过getter而不是函数形式，减少变量
get renderFullName () {
  return `${this.props.firstName} ${this.props.lastName}`;
}

render () {
   <div>{ this.renderFullName  }</div> 
}
로그인 후 복사

Vue를 알고 계시다면 하단에 getter도 사용하는 계산: {} 계산 속성을 아실 것입니다. 그러나 객체의 getter는 클래스의 getter가 아닙니다

// 计算属性，计算renderFullName
computed: {
    renderFullName: () => {
         return `${this.firstName} ${this.lastName}`;
    }
}
로그인 후 복사

Vue의 계산에는 한 가지 장점이 있습니다.

계산된 속성과 함수 실행: 계산을 줄이기 위해 캐싱이 있습니다 ---> 계산된 속성은 관련 종속성이 변경될 때만 재평가됩니다.

즉, firstName과 lastName이 변경되지 않는 한 renderFullName 계산 속성에 여러 번 액세스하면 함수를 다시 실행할 필요 없이 이전 계산 결과가 즉시 반환됩니다.

그럼 리액트의 게터에도 캐싱의 장점이 있나요? ? ? 답은: 아니요, 반응 중인 getter는 캐싱 최적화를 수행하지 않습니다!

2. 컴포넌트 속성 및 이벤트 실행 순서:

A. 부모-자식 컴포넌트: props 형태로 부모가 자식에게 전달합니다.

B. 동일한 컴포넌트: 뒷면이 앞면을 덮습니다. .

위 규칙에 따라 attr이 가장 ​​높은 가중치를 가지게 하려면 가장 낮은 컴포넌트에 배치되어야 하며 위치는 최대한 뒤쪽에 있어야 합니다. 

<-- 父组件Parent | 调用子组件并传递onChange属性 -->
<div>
    <Child  onChange={this.handleParentChange} />
</div>

<-- 子组件Child | 接收父组件onChange， 自己也有onChange属性 -->
<input {...this.props} onChange={this.handleChildChange}  />
로그인 후 복사

이때 Child 컴포넌트에서 실행되는 onChange는 handlerChildChange 이벤트만 실행하며, handlerParentChange 이벤트는 실행되지 않습니다.

  • 1. ? 입력 {...this.props} 및 onChange={this.handleChildChange} 위치를 변경하세요.
  • 2. 두 이벤트를 모두 실행해야 한다면 어떻게 되나요? ? ㅋㅋㅋ                                                                        하위 구성 요소 this.props.handleParentChange의 handleChildChange 에서 실행됩니다.

3. 클래스의 ES6 메소드 약어 차이: fn = () => ( ) {} 차이점: 

export default Class Child extends Component {
    constructor (props) {
        super()
        this.state = {};
   }

    // 写法1，这是ES6的类的方法写法
    fn1() {
         console.log(this)
        // 输出 undefined
    }
 
    // 写法2，这是react的方法写法
    fn2 = () => {
         console.log(this)
         // 输出：Child {props: {…}, context: {…}, refs: {…}, …}
    }

   render () {
        return (
          <div>
               <button onClick={this.fn1}>fn1方法执行</button >
               <button onClick={this.fn2}>fn2方法执行</button >
          </div>
         );
   }
}
로그인 후 복사

은 두 가지 표기 방식으로 볼 수 있으며, 함수 내 this 점이 다릅니다.

그럼 공통점이 없나요? ? , 다음 세 가지 상황은 동일합니다.

사례 1: 함수 내부에서 사용되지 않는 경우 둘은 동일합니다. 

// 写法1，这是ES6的类的方法写法
    fn1() {
        return 1 + 1
    }
 
    // 写法2，这是react的方法写法
    fn2 = () => {
         return 1 + 1
    }
로그인 후 복사

사례 2: 둘 다 렌더링에서 직접 실행되는 경우. 

// 写法1，这是ES6的类的方法写法
    fn1() {
         console.log(this)
        // Child {props: {…}, context: {…}, refs: {…}, …}
    }
 
    // 写法2，这是react的方法写法
    fn2 = () => {
         console.log(this)
         // 输出：Child {props: {…}, context: {…}, refs: {…}, …}
    }

   render () {
        return (
          <div>
               <button onClick={() => {
                        this.fn1();
                }}>fn1方法执行</button >

               <button onClick={() => {
                        this.fn2();
                }}>fn2方法执行</button >
          </div>
         );
   }
로그인 후 복사

사례 3: this.fn2.bind(this)를 제공하고 이 작업 컨텍스트를 바인딩합니다. 

// 写法1，这是ES6的类的方法写法
    fn1() {
         console.log(this)
        // Child {props: {…}, context: {…}, refs: {…}, …}
    }
 
    // 写法2，这是react的方法写法
    fn2 = () => {
         console.log(this)
         // 输出：Child {props: {…}, context: {…}, refs: {…}, …}
    }

   render () {
        return (
          <div>
               <button onClick={this.fn1}>fn1方法执行</button >

               <button onClick={this.fn2.bind(this)}>fn2方法执行</button >
          </div>
         );
   }
로그인 후 복사

참고로 ES6의 object 메소드 약어와 혼동하지 마세요. 다음은 object Object의 메소드 약어입니다.

阮一峰ES6: http://es6.ruanyifeng.com/#docs/object

4. 목록 렌더링의 배열

참고: https://doc.react-china.org/docs/lists-and-keys.html

일반적인 jsx 작성 방법은 작성하는 것입니다. 렌더링 HTML 구문에서 이와 같은 것, 중첩된 태그

, js가 있는 경우 {중괄호}를 사용하세요.

하지만

배열이 태그 안에 중첩되어 정상적으로 렌더링될 수 있다는 사실을 눈치채셨는지 모르겠습니다. 

function NumberList(props) {
    const numbers = [1,2,3,4,5];

    // listItems是数组numbers通过map返回的，本质也是个数组。 
    const listItems = numbers.map((number) =>
        <li>{number}</li>
    );

    return (
        <ul>
             // 可以替换成 [ <li>1</li>,  <li>2</li>,  .....]
             {listItems}
        </ul>
    );
}
로그인 후 복사

위와 같이 태그 내부의 배열이 올바르게 렌더링될 수 있다면 다음과 같은 작성 방법이 있습니다. 

renderItem(name) {
    const A = <li key={&#39;a&#39;}>A</li>, 
             B = <li key={&#39;b&#39;}>B</li>, 
             C = <li key={&#39;c&#39;}>C</li>, 
             D = <li key={&#39;d&#39;}>D</li>;
     let operationList;

     switch (name) {
        case 1:
            operationList = [A , B,  C]
           break;
        case 2:
            operationList = [B,  C, D]
            break;
        case 0:
           operationList = [A]
           break;
    }
    return operationList;
}

render() {
　　 // this.renderItem() 执行结果是数组
    return (
         <ul>{  this.renderItem() }</ul>
    )
}
로그인 후 복사

更多编程相关知识，请访问：编程视频！！

위 내용은 당신이 눈치 채지 못했을 수도 있는 반응의 세부 사항! (요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript react
원천：cnblogs.com
이전 기사：jquery에 특정 속성이 있는지 확인하는 방법 다음 기사：JS(Linked-list)의 데이터 구조에 대한 심층적인 이해
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿