2017-04-07 83 views
0

这里发生了什么,我知道你正在构建你自己的render方法,它将呈现h1的html。这个render方法被React.DOM调用以找出给虚拟dom的东西。对于componentDidMount等方法也是一样的吗?如果你使用了这些生命周期方法或者render,React会相应地调用它们以适应它们的代码,但是如果创建其他函数,那么这些函数将只是辅助函数,供你使用,对吧?当您使用#extend时,React组件中发生了什么?

我想我只是想了解Component类的哪个部分正在被React.DOM使用,以及我正在构建哪个部分。看起来很奇怪,有些方法用于“配置”组件,而另一些则用作助手。 Component课程中的哪些代码是React.DOM正在使用?是不是想找出什么时候放弃东西的差异?

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

回答

2

以下是需要考虑的事项:在很久以前的很久以前,React和React-DOM都是相同的。 React完全针对webapps。所以我们可以使用h1,div,span,img,所有这些都只使用React。

现在让我问你这个问题。假设他们想要使用React,并且使其不仅可以呈现给网页的DOM,还可以呈现原生移动应用程序的不同组件?你会在那种情况下做什么?

显然,上述所有HTML DOM元素,如h1 s等都是完全无用的! Android和iOS内部不知道这些是什么。

所以合乎逻辑的解决方法是将其抽象出来。而不是让这些DOM节点成为React的固有部分,而是使其成为React可以在任何地方渲染的东西!

您会发现,React引擎在React Native(移动开发)和标准的基于Web的React with React-DOM中的工作方式几乎相同。生命周期方法,设计原则,和解,整个引擎是一样的。由于React不是关于HTML或本地应用程序,而是关于从应用程序状态到UI状态的数据流范例。


那么,React-DOM如何处理组件?没有很多东西,真的。所有的差异,数据流等都由React处理。

React-DOM所做的是什么知道如何将由React元素提供的数据呈现为DOM节点。它知道如何更新它们,如何删除它们,以及所有这些。你看,把所有这些能力作为React核心的一部分现在都不会很理想,因为React的目标是那些能力无用的平台。他们只会膨胀包装。

2

您需要提供的类中唯一的方法是渲染。正如你所提到的,其他组件生命周期方法在这些生命周期方法发挥作用时被调用。如果你不需要进入其他生命周期方法(组件只是返回一些基于提供给它的道具的标记),并且你的组件不需要它自己的状态,那么我强烈推荐使用无状态的功能组件。通过阵营团队提供的文档是很好的说明这一点 -

https://facebook.github.io/react/docs/components-and-props.html

由于作为“辅助方法”你提到远,是的,你可以为你在你的类需要定义尽可能多的方法。将一些更复杂的渲染逻辑分成更小更容易读取代码可读性的函数是很常见的。

+0

这里是另一个链接到他们的文档,可以帮助解释组件的生命周期方法和当他们被称为良好https://facebook.github.io/react/docs/react-component.html –

相关问题