有没有像JSX'偏见'这样的想法？

Question

我现在主要使用Handlebars JS,但我正在研究JSX.是否有一个等同于Handlebars部分的JSX？我想知道我是否可以创建一些可以在几个不同的JSX视图中重用的标记.

Answer 1

它不提供部分内容.关于React的一些事情:

• React不提供任何部分概念.React的基本原子单元是组件.
• 您可以创建一个或多个组件并重新使用它们,而不是传递部分组件.甚至比部分更好,因为它是一个功能,所以它是封装和可测试的!
• 如果标记很小,它可能应该向上移动到父组件或向下移动到更简单的组件

一般来说,我的经验法则是组件应遵循单一责任原则或关注点分离原则.如果某些东西似乎不适合某个组件,那么你可能在其他两个组件中遇到问题,并且可能会重新考虑它们:)

在考虑组件时要考虑另外几条经验法则:

• 代码味道通常最终应该作为组件(反复重复某些事情等)
• 组件通常是表现的或集装箱化的.后者在应用程序的道具/状态树中具有角色(您永远不会"看到它们")
• 根据需要将事物重构为组件; 不要开始封装所有东西,因为你可能过早地重构并为自己创造了更多问题
• 最可重复使用和分离的组件就像最好的功能或对象:干净,灵活,可测试,它们确实解决了一个问题

• 与此同时,不要发疯,把一切都变成一个组件.即你不(通常)想要:

  <Letter>R</Letter><Letter>e</Letter><Letter>a</Letter><Letter>c</Letter><Letter>t</Letter>

这是一个非常简单的例子:

'use strict';

const OuterComponent = React.createClass({
  render() {
    return (
        <div>Outer{this.props.children}</div>
    );
  }
});

const ReusableComponent = React.createClass({
  render() {
    return (
        <div>Am I reusable? {this.props.reusable && 'Yeah!' }</div>
    );
  }
});

ReactDOM.render(
  <OuterComponent>
    <ReusableComponent reusable={true}/>
  </OuterComponent>,
  document.getElementById('container')
);

将呈现:

OuterComponent
Am I reusable? Yeah!

但是请注意,creatClass如果您没有使用可变状态(通过组件提供给您this.state),那么使用提供的内容比您可能需要的多,您可以轻松使用有时称为"无状态功能组件"(因为它们)是,无国籍,并由功能返回).这些很容易就是箭头函数隐式返回JSX(它本质上只是React.createElement()生成器)

const OuterComponent = (props) => <div>Outer{this.props.children}</div>;

const ReusableComponent = (props) => <div>Am I reusable? {this.props.reusable && 'Yeah!' }</div>;

ReactDOM.render(
  <OuterComponent>
    <ReusableComponent reusable={true}/>
  </OuterComponent>,
  document.getElementById('container')
);