당신이 눈치 채지 못했을 수도 있는 반응의 세부 사항! (요약)
- 青灯夜游앞으로
- 2021-02-11 08:55:532287검색
반응에서 이러한 세부 사항을 발견한 적이 있나요? 다음 기사에서는 여러분이 눈치채지 못했을 수도 있는 반응에 대한 몇 가지 세부 사항을 요약합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
[관련 튜토리얼 권장 사항: 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 구문에서 이와 같은 것, 중첩된 태그 e388a4556c0f65e1904146cc1a846bee73a3ca28445b1c625f2086a50cb8c7df94b3e26ee717c64999d7867364b1b4a3, 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={'a'}>A</li>,
B = <li key={'b'}>B</li>,
C = <li key={'c'}>C</li>,
D = <li key={'d'}>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!