CNode

React组件写法的讨论

问答
Ccllgeek发布于10 年前最后回复10 年前6 回复6348 浏览0 收藏

目前我遇到的写法有:

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)

Y
yongningfu#1·10 年前

其实就相当于 {post} = this.props

M
magicdawn#2·10 年前

pure render

C
chengang4505#3·10 年前

第三种其实就是一个function,当你的组件是一个function的时候,她会传入this.props,{post}中的post 等价于 this.props.post

F
Frozenme#4·10 年前

pure function 纯ui组件这样写更简洁 From Noder

N
NumerHero#5·10 年前

1、2种我认为是等价的,分别用于Es5 和 6

3 是一个pure func 其中不涉及数据的更新,也就是说,react会调用这个函数返回的 组件去渲染静态的html

这个组件是不拥有react的生命周期的,没有state控制更新,但是会有静态props的数据渲染

X
xueyou2000#6·10 年前

无状态组件,返回函数而不是实例。 开销很低,尽量使用它

来自酷炫的 CNodeMD

参与回复
登录后即可参与回复。登录