redux - react.js语法问题

问题描述

问 题

在学习react和react-redux时，遇到了两种写法，看官网文档，并不是很明白：
在官网文档里有写到：

Stateless function components
In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take props as an argument and return the element you want to render:

// Using an ES2015 (ES6) arrow function:
var Aquarium = (props) => {
  var fish = getFish(props.species);
  return <Tank>{fish}</Tank>;
};

// Or with destructuring and an implicit return, simply:
var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);

// Then use: <Aquarium species="rainbowfish" />

翻译下来大致说的是无状态组件是为了合并其他组件，通过传递props属性返回一个新元素，不是很明了和普通的render函数有什么区别，两者能够共同跑起来啊，有何异同之处？

class App extends Component {
    render() {
        return (
            <div>
                <h1>123123</h1>
            </div>
        )
    }
}

解决方案

如果组件没状态和用到生命周期的方法的话就用 function 的写法，会有更好的性能。

这里 https://facebook.github.io/re... 讲的挺明白的。

这篇关于redux - react.js语法问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！