Question

我看到很多2个术语可以互换使用。这使我非常困惑，有人可以向我解释这些差异吗？

Answer 1

一个组件是一组元素（如文档所述）：

注意：可能会使元素与更广为人知的 “组件”。我们将在下一节介绍组件。元素是“组成”的组成部分，我们鼓励您在继续前进之前，请先阅读本节。

在这里，我可以告诉您两个快速区别：

元素没有道具或状态，它们只是视觉上的东西（但是您可以使用{}执行Javascript。



在渲染时，将元素用作任何变量，这与通过标签的组件不同，例如：
// This is a component
ReactDOM.render(<Element />, document.getElementById('root'));

// This is an Element
ReactDOM.render(element, document.getElementById('root'));

Answer 2

element是分配给JSX值的东西：

const foo = <p>My name is foo</p>;

我们可以使用以下方法将元素呈现到DOM中：

ReactDOM.render(foo, document.getElementById('root'));

您可以通过组合不同的元素来创建整个应用。

const name = "foo";
const greeting = (
    <div>
        <h1>Hello, {name}</h1>
        <p>Welcome!</p>
    </div>
);
    
ReactDOM.render(greeting, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

当然，如果没有灵活性以及诸如状态和生命周期方法之类的其他优势，肯定很难编写整个应用程序。因此，这就是我们拥有组件的原因。

组件是一个返回JSX element或element组成的函数。

const Greeting = ( props ) => (
    <div>
        <h1>Hello, {props.name}</h1>
        <p>Welcome!</p>
    </div>
);

ReactDOM.render(
  <Greeting name={"foo"} />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

因此，组件实际上是可选地带有props和return元素的函数。上面的代码是“功能组件”的示例。要使用状态和生命周期方法，我们必须使用“类组件”。

class Greeting extends React.Component {
  state = {
    name: "",
  }
  
  getName = () => new Promise( resolve =>
    setTimeout( () => resolve( "foo" ), 1000 )
  );
  
  componentDidMount() {
    this.getName().then( name => this.setState( { name } ) );
  }
  
  render() {
  const { name } = this.state;
    return (
      <div>
        <h1>Hello, 
        {
          !name
            ? <span> stranger.</span>
            : <span> {name}.</span>
        }</h1>
        <p>Welcome!</p>
    </div>
    );
  }
 
}

ReactDOM.render(
  <Greeting />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

以上组件等待一秒钟，然后获取name值并将其设置为state。直到完成为止，我们的观点是说“陌生人”而不是被抓住的名字。这可以归功于生命周期方法和状态。

对于React，这两个组件都是相同的。他们最终以某种方式返回了JSX。类是Javascript中的特殊函数，因此这就是为什么我说所有组件都是“函数”的原因。 React，基于类的组件的区别在于状态和生命周期方法。

当然，组件也可以返回其他组件，但是与component和element的主要区别是它们之一只是一个JSX值，另一个是函数返回元素。

最大的区别在于，除了作为函数并返回其他element之外，我们当然还有component的状态和生命周期方法。如果element是一块砖，那么component就像一堵墙。

在ReactJs中，组件和元素之间有什么区别？

2 个答案: