Reactjs 如何使用不同的语法来减少下面代码中的行数？

我想减少组件代码中的行数并使其更光滑？ render（）是否有其他语法可用于缩短代码

import Counter from "./Counter";

export default class Bookstore extends Component {
  render() {
    return (
      <div className="app">
        <TopBar>React Components are state machines</TopBar>
        <h1 className="headline white-text">* ^ * Stateful Bookstore * ^ *</h1>
        <Counter count={this.count} name="Employees" />
        <Counter count={this.count} name="Customers" />
        <br />
        <hr />
        <NameInput />
      </div>
    );
  }
}

从“/Counter”导入计数器；
导出默认类扩展组件{
render（）{
返回(
React组件是状态机
*^*有州书店*^*



);
}
}

import React，{Component}来自“React”；
导出默认类计数器扩展组件{
状态={
计数：0
};
添加\ u计数=事件=>{
console.log（event.target）；
this.setState（{count:this.state.count+1}）；
};
render（）{
返回(
{this.props.name}:{this.state.count}
{this.props.name}
);
}
}

使用功能组件而不是

React.component

const计数器=（{name}）=>{
const[count，setCount]=React.useState（0）
返回(
{name}:{count}
设置计数（计数+1）}>
{name}
)
}

为了更加光滑，您还可以在单独的文件中定义自定义挂钩并导入它

//Custom Counter Hook
function useCounter( start = 0 ) {
  const [count, setCount] = useState(start);
  function increment() {
    setCount(count => count + step);
  }
  return [count, increment];
}

然后在此处导入钩子：

const Counter = ({ name }) => {
  const [counter, setCounter] = useCounter(0); 
  return (
    <div className="hbox space-between mt20">
      <h3 className="paragraph">
        {name}: {counter}
      </h3>

      <button className="button" onClick={setCounter}>
        {name}
      </button>
    </div>
  )
}

const计数器=（{name}）=>{
常量[计数器，设置计数器]=使用计数器（0）；
返回(
{name}:{counter}
{name}
)
}

如果这是工作代码，而您只想了解清理/使其更简洁的技巧，请转到“您可以使用功能组件”部分。正如Mike所说，最好使用codereview

const Counter = ({ name }) => {
  const [counter, setCounter] = useCounter(0); 
  return (
    <div className="hbox space-between mt20">
      <h3 className="paragraph">
        {name}: {counter}
      </h3>

      <button className="button" onClick={setCounter}>
        {name}
      </button>
    </div>
  )
}