React组件写法的讨论
发布于 8 年前 作者 cllgeek 5488 次浏览 来自 问答

目前我遇到的写法有:

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

第三种其实就是一个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

回到顶部