React组件写法的讨论
目前我遇到的写法有:
const App=React.createClass({render()}); class App extends React.Component{…}; const App=()=>(); 前面二种我都知道,就是第三种是什么鬼,哪位大神给我讲解一下,
import React from 'react';
import { Link } from 'react-router';
const Photo=({post})=>(
<figure className="grid-figure">
<div className="grid-photo-wrap">
<Link to={'/view/${post.code}'}>
{post.caption}
</Link>
</div>
</figure>
);
export default Photo;
上面的代码是怎么的解构赋值法 this.props跑哪去了???
6 回复
其实就相当于 {post} = this.props
pure render
第三种其实就是一个function,当你的组件是一个function的时候,她会传入this.props,{post}中的post 等价于 this.props.post
pure function 纯ui组件这样写更简洁 From Noder
1、2种我认为是等价的,分别用于Es5 和 6
3 是一个pure func 其中不涉及数据的更新,也就是说,react会调用这个函数返回的 组件去渲染静态的html
这个组件是不拥有react的生命周期的,没有state控制更新,但是会有静态props的数据渲染
无状态组件,返回函数而不是实例。 开销很低,尽量使用它
来自酷炫的 CNodeMD