Question

功能声明

function MyComponent(props, context) {}

功能表达

const MyComponent = function(props, context){}

箭头功能

const MyComponent = (props, context) => {}

Answer 1

功能声明，如果您想要提升并且更喜欢可读性而非性能。

函数表达式，如果您想为函数命名，以便从调试堆栈跟踪（例如Chrome开发工具）中更容易识别它。

箭头功能如果您不想在堆栈跟踪中使用匿名函数并希望避免绑定this。

Answer 2

我的无状态组件看起来像这样，对我来说看起来很干净，看起来就像HTML一样。另外，如果你不使用括号，es6箭头函数会假设返回表达式，所以你可以把它们留下来：

const Table = props => 
    <table className="table table-striped table-hover">
        <thead>
            <tr >
                <th>Name</th>
                <th>Contact</th>
                <th>Child Summary</th>
            </tr>
        </thead>
        <tbody>
            {props.items.map(item => [
                <TableRow itemId={item.id} />,
                item.isSelected && <TableRowDetails itemId={item.id} /> 
            ])}
        </tbody>
    </table>

哪一个是在React.js中声明无状态功能组件的首选方式？为什么？

2 个答案: