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

Question

Function Declaration

function MyComponent(props, context) {}

Function Expression

const MyComponent = function(props, context){}

Arrow function

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

Answer 1

Function Declaration if you want hoisting and prefer readability over performance.

Function Expression if you want to name your function so you can identify it easier from debugging stack traces (eg from Chrome dev tools).

Arrow Function if you want if you don't care about having an anonymous function in your stack trace and want to avoid binding this .

Answer 2

My stateless components look like this, which seems very clean to me and pretty much looks just like HTML. Also, es6 arrow functions assume the return expression if you dont use brackets, so you can leave those out:

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>