React中函数式声明组件
前文介绍的组件的定义方式主要是声明式组件,其与传统的jQuery中以DOM操作为核心的命令式组件生成相比具有更大的灵活性与可组合性。而实际上随着应用复杂度与所需要的组件数目的持续增加,我们所需要的组件也会被划分为很多的类型。从组件组合的角度或者所谓动态组件的角度来看,常见的即是HOC模式,即将某个组件作为另一个组件的Props或者子组件从而封装出高阶组件。还有另一种偏向函数式的模式即是构造出函数式组件,就好像Arrow Function一样,对于无状态的简单组件,使用函数式组件的方式声明,会使得代码的可读性更好,并且减少冗余代码的数目。在React本身对于界面的抽象可以用
onClick={this.sayHi.bind(this)}>Say Hi</a> onClick={sayHi}>Say Hi</a>
最后,通过下图的对比,可以看出函数式组件声明方法的简洁性:
Usage:使用这里我们定义一个简单的Text组件: class Text extends React.Component { render() { return <p>{this.props.children}</p>; } } React.render(<Text>Hello World</Text>,document.body); 上面定义的Text组件可以看做典型的Pure Components,或者说是Dummy Components,即好像函数式编程中的纯函数一样,输出完全由输入的Props决定,并且不会产生任何的副作用。这种类型的组件会在我们的应用中占据很大的份额,而在React 0.14之后也允许我们以类似于定义函数的方式来定义这种无状态组件,如下所示: const Text = (props) => <p>{props.children}</p>; // ReactDOM is part of the introduction of React 0.14 ReactDOM.render( <Text>Hello World</Text>,document.querySelector('#root') ); 这种模式主要是鼓励在大型项目中尽可能地以简单的写法来分割原本庞大的组件,而未来React也会面向这种无状态的组件在譬如避免无意义的检查或者内存分配领域进行一些专门的优化。这种无状态函数式组件的写法也是支持设置默认的Props类型与值的: const Text = ({ children }) => <p>{children}</p> Text.propTypes = { children: React.PropTypes.string }; Text.defaultProps = { children: 'Hello World!' }; 我们也可以利用ES6默认函数参数的方式来设置默认值: const Text = ({ children = 'Hello World!' }) => <p>{children}</p> 另外,在无状态的组件函数中,我们也是可以访问Context的: const Text = (props,context) => <p style={context}>props.children</p>; Text.contextTypes = { fontFamily: React.PropTypes.string }; class App extends React.Component { static childContextTypes = { fontFamily: React.PropTypes.string } getChildContext() { return { fontFamily: 'Helvetica Neue' }; } render() { return <Text>Hello World</Text>; } }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |