33、构建 React.js 区块链客户端：智能组件与展示组件详解

构建 React.js 区块链客户端：智能组件与展示组件详解

1. 智能 App 组件

在处理区块链客户端开发时，智能 App 组件是核心所在。有一个小技巧值得注意，将节点设为不可变对象或许是解决某些问题的更好方案。对于不可变对象，每当其状态改变时，会创建一个新实例和引用，这样就无需使用事务计数器的 hack 方法。

1.1 生成新块

App 组件通过 props 将 onGenerateBlock() 回调传递给 PendingTransactionsPanel 。当用户点击 “GENERATE BLOCK” 按钮时， PendingTransactionsPanel 组件会调用 onGenerateBlock() ，进而调用 App 组件的 generateBlock() 方法，代码如下：

async function generateBlock() {
    server.requestNewBlock(node.pendingTransactions);
    const miningProcessIsDone = node.mineBlockWith(node.pendingTransactions);
    setStatus(getStatus(node));
    const newBlock = await miningProcessIsDone;
    addBlock(newBlock);
}