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

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

[관련 튜토리얼 권장 사항: 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 id="fullName">{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 중국어 웹사이트의 기타 관련 기사를 참조하세요!