반응의 요소와 구성 요소의 차이점은 무엇입니까-JS 튜토리얼-php.cn

반응에서 요소와 구성 요소의 차이점: 1. 요소 데이터 구조는 일반 개체인 반면 구성 요소 데이터 구조는 클래스 또는 순수 함수입니다. 2. JSX에서 요소에 중첩된 요소는 다음과 같이 요소에 전달됩니다. 속성 children 요소의 구성 요소입니다.

반응의 요소와 구성 요소의 차이점은 무엇입니까

React에서 요소와 컴포넌트의 차이점:

1. React 요소

React 요소(React 요소)는 React에서 가장 작은 기본 단위로, JSX를 사용하여 쉽게 만들 수 있습니다. 구문 React 요소:

const element = <div className="element">I&#39;m element</div>

로그인 후 복사

React 요소는 실제 DOM 요소가 아니며 js의 일반 개체이므로 DOM 기본 API를 직접 호출할 방법이 없습니다. 위의 JSX로 번역된 객체는 다음과 같습니다:

{
    _context: Object,
    _owner: null,
    key: null,
    props: {
    className: &#39;element&#39;，
    children: &#39;I&#39;m element&#39;
  },
    ref: null,
    type: "div"
}

로그인 후 복사

이 요소의 렌더링이 완료된 후에만 해당 DOM 요소를 선택기를 통해 얻을 수 있습니다. 하지만 React의 유한 상태 기계(Finite State Machine)의 설계 아이디어에 따르면 상태와 속성을 사용하여 구성 요소를 설명해야 하며 DOM 작업을 수행하더라도 인터페이스 ref 및 <는 최대한 피해야 합니다. React에서 제공하는 code>getDOMNode(). 일반적으로 React에서 제공하는 인터페이스를 사용하면 DOM 조작이 필요한 시나리오에 충분히 대처할 수 있으므로 jQuery와 같은 강력한 선택기는 React에서 거의 자리를 잡지 못합니다. getDOMNode()。一般使用 React 提供的接口就足以应付需要 DOM 操作的场景了，因此像 jQuery 强大的选择器在 React 中几乎没有用武之地了。

除了使用 JSX 语法，我们还可以使用 React.createElement() 和 React.cloneElement() 来构建 React 元素。

React.createElement()

JSX 语法就是用React.createElement()来构建 React 元素的。它接受三个参数，第一个参数可以是一个标签名。如div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。

React.createElement(
    type,
    [props],
    [...children]
)

로그인 후 복사

React.cloneElement()

React.cloneElement()与React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而就的子元素奖杯替换。

React.cloneElement(
  element,
  [props],
  [...children]
)

로그인 후 복사

2、React 组件

React 中有三种构建组件的方式。React.createClass()、ES6 class和无状态函数。

React.createClass()

React.createClass()是三种方式中最早，兼容性最好的方法。在0.14版本前官方指定的组件写法。

var Greeting = React.createClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

로그인 후 복사

ES6 class

ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，但它的实现仍是调用React.createClass()来实现了，ES6 class的生命周期和自动绑定方式与React.createClass()略有不同。

class Greeting extemds React.Component{
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
};

로그인 후 복사

无状态函数

无状态函数是使用函数构建的无状态组件，无状态组件传入props和context两个参数，它没有state，除了render()，没有其它生命周期方法。

function Greeting (props) {
  return <h1>Hello, {props.name}</h1>;
}

로그인 후 복사

React.createClass()和ES6 class构建的组件的数据结构是类，无状态组件数据结构是函数，它们在 React 被视为是一样的。

3、元素与组件的区别

组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数。除此之外，还有几点区别要注意：

this.props.children

在 JSX 中，被元素嵌套的元素会以属性 children 的方式传入该元素的组件。当仅嵌套一个元素时，children 是一个 React 元素，当嵌套多个元素时，children 是一个 React 元素的数组。可以直接把 children 写入 JSX 的中，但如果要给它们传入新属性，就要用到React.cloneElement()来构建新的元素。我曾放过以下错误:

render () {
  var Child = this.props.children
  return <div><Child tip={&#39;error!&#39;}/><div>
}

로그인 후 복사

因为 Child 是一个 React 元素，而不是组件，这样的写法是完全错误的，正确的方式应该是：

render () {
  var child = this.props.children
  return <div>{ React.cloneElement(child, {tip: &#39;right way!&#39;}) }<div>
}

로그인 후 복사

就这样，原有属性和新添加的属性被一并传入了子元素。使用React.cloneElement()才是操作元素的正确姿势。

用户组件

有的时候，组件可以让用户以属性的方式传入自定义的组件，来提升组件的灵活性。这个属性传入的就应该是 React 元素，而非 React 组件。使用 React 元素可以让用户传入自定义组件的同时，为组件添加属性。同样，可以使用React.cloneElement()为自定义组件添加更多属性，或替换子元素。

// 推荐
<MyComponent tick={
  <UserComponent tip="Yes"/>
} />
 
// 不推荐
<MyComponent tick={ UserComponent } />

로그인 후 복사

最后

最后，打个不恰当的比喻，React 组件是MyComponent，React 元素就是<MyComponent />

JSX 구문을 사용하는 것 외에도 React.createElement() 및 React.cloneElement()를 사용하여 React 요소를 빌드할 수도 있습니다.

React.createElement()JSX 구문은 React.createElement()를 사용하여 React 요소를 빌드하는 것입니다. 세 개의 매개변수를 허용하며 첫 번째 매개변수는 태그 이름이 될 수 있습니다. div, 범위 또는 React 구성요소 등입니다. 두 번째 매개변수는 전달된 속성입니다. 세 번째 및 후속 매개변수는 모두 구성요소의 하위 구성요소입니다. rrreeeReact.cloneElement()

React.cloneElement()는 전달되는 첫 번째 매개변수가 태그 이름이나 구성 요소 대신 React 요소라는 점을 제외하면 React.createElement()와 유사합니다. 새로 추가된 속성은 원래 속성에 병합되어 반환된 새 요소로 전달되고 하위 요소는 대체됩니다. 🎜rrreee🎜🎜2. React 컴포넌트🎜🎜🎜React에서 컴포넌트를 빌드하는 방법에는 세 가지가 있습니다. React.createClass(), ES6 클래스 및 상태 비저장 함수. 🎜🎜React.createClass()🎜🎜React.createClass()는 세 가지 방법 중 가장 오래되고 가장 호환되는 방법입니다. 버전 0.14 이전에 공식적으로 지정된 컴포넌트 작성 방법입니다. 🎜rrreee🎜🎜ES6 클래스🎜🎜🎜ES6 클래스는 현재 공식적으로 권장되는 사용 방법입니다. ES6 표준 구문을 사용하여 구축되었지만 여전히 React.createClass()를 호출하여 구현됩니다. ES6 클래스의 생명주기와 자동 바인딩 방식은 React.createClass()와 약간 다릅니다. 🎜rrreee🎜🎜상태 없는 함수🎜🎜🎜상태 없는 함수는 함수를 사용하여 구축된 상태 없는 구성 요소입니다. 상태 없는 구성 요소는 props와 context라는 두 가지 매개변수를 전달합니다. 여기에는 상태가 없고 render()를 제외한 다른 수명 주기 메서드가 없습니다. 🎜rrreee🎜React.createClass()와 ES6 클래스로 구축된 컴포넌트의 데이터 구조는 클래스이고, Stateless 컴포넌트의 데이터 구조는 React에서 동일하게 간주됩니다. 🎜🎜🎜3. 요소와 구성 요소의 차이점🎜🎜🎜구성 요소는 요소로 구성됩니다. 요소 데이터 구조는 일반 개체인 반면, 구성 요소 데이터 구조는 클래스 또는 순수 함수입니다. 또한 주목해야 할 몇 가지 차이점이 있습니다. 🎜🎜🎜this.props.children🎜🎜🎜JSX에서는 요소에 중첩된 요소가 요소의 구성 요소에 하위 속성으로 전달됩니다. 하나의 요소만 중첩되면 children은 React 요소이고, 여러 요소가 중첩되면 children은 React 요소의 배열입니다. JSX에 직접 하위 요소를 작성할 수 있지만 하위 요소에 새 속성을 전달하려면 React.cloneElement()를 사용하여 새 요소를 빌드해야 합니다. 저는 다음과 같은 오류를 한 번 풀었습니다.🎜rrreee🎜Child는 컴포넌트가 아니라 React 요소이기 때문입니다. 올바른 방법은 다음과 같습니다.🎜rrreee🎜이렇게 하면 원래 속성과 새로 추가된 속성은 하위 요소도 전달됩니다. React.cloneElement()를 사용하는 것이 요소를 작동하는 올바른 방법입니다. 🎜🎜🎜사용자 구성 요소🎜🎜🎜때때로 구성 요소를 통해 사용자는 구성 요소의 유연성을 향상시키기 위해 사용자 정의 구성 요소를 속성 형식으로 전달할 수 있습니다. 이 속성은 React 구성 요소가 아닌 React 요소에 전달되어야 합니다. React 요소를 사용하면 사용자는 사용자 정의 구성 요소를 전달하는 동시에 구성 요소에 속성을 추가할 수 있습니다. 마찬가지로 React.cloneElement()를 사용하여 사용자 정의 구성 요소에 더 많은 속성을 추가하거나 하위 요소를 교체할 수 있습니다. 🎜rrreee🎜마지막으로🎜🎜마지막으로 부적절한 비유를 하자면, React 구성 요소는 MyComponent이고 React 요소는 <MyComponent />입니다. 🎜🎜🎜🎜관련 무료 학습 권장 사항: 🎜🎜🎜JavaScript🎜🎜🎜(동영상)🎜🎜🎜

위 내용은 반응의 요소와 구성 요소의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!