React 组件模式
什么是组件(component) 组件运行你将 UI 拆分为独立的可重用的部分。和 JavaScript 函数类似,组件接收名为 props 的输入并返回 React 元素,它描述(声明)用户界面应该是什么样子的。这就是 React 被称为声明性 API 的原因,你只需要声明你希望得到的 UI ,之后 React 负责具体的细节。 组件 API 当安装 React 后,便可以使用 React 提供的 API,基本可以分成 5 种。
虽然组件可以使用所有的 API,但是通常一个组件只使用部分的 API,我们可以对使用不同 API 的组件进行细分,分成有状态(stateful) 和无状态(stateless) 两种组件。
这样将数据逻辑和 UI 表现层进行分离,通过组件之间划分职责可以创建更多可重用的组件,在构建可扩展的应用程序时尤为重要。 组件模式 通常组件模式有以下几种:
container 容器组件(container component )负责获取数据然后渲染部分交给相应的子组件来负责。 容器是你的数据或逻辑层并利用 stateful API,使用生命周期事件你可以连接 state 到 redux 或 flux 的 storage 中。在容器组件的 render 方法中,你可以使用 Presentational 组件来渲染具体的样式。
我们来定义一个 组件 Greeting,他具有状态,生命周期 componentDidMount 事件 和 render 方法。 class Greeting extends React.Component { constructor() { super(); this.state = { name: "",}; } componentDidMount() { // AJAX this.setState(() => { return { name: "William",}; }); } render() { return ( <div> <h1>Hello! {this.state.name}</h1> </div> ); } } 现在我们对 Greeting 进行改进,将其分离成容器组件(container component)和展示组件(presentational component)。 Presentational Presentational components 使用 props,render,和 context (stateless API‘s) ,并且由于不需要使用生命周期相关api,我们可以使用纯函数来简化表述它们: const GreetingCard = (props) => { return ( <div> <h1>Hello! {props.name}</h1> </div> ) } Presentational components 只从 props 获取数据和回调函数,props 由容器组件提供。 容器组件和展示组件各自将数据/逻辑和展示部分封装到各自的组件中: const GreetingCard = (props) => { return ( <div> <h1>{props.name}</h1> </div> ) } class Greeting extends React.Component { constructor() { super(); this.state = { name: "",}; }); } render() { return ( <div> <GreetingCard name={this.state.name} /> </div> ); } } 高阶组件(Higher order components【HOC’s】) 高阶组件是一个接收一个组件作为参数然后返回全新组件的函数。 这是一种强大的模式,我们可以对输入组件的 props 进行修改(增删改查)然后返回全新的修改后的组件,例如 react-router-v4 的 withRouter() 方法可以包装任何自定义组件,将 react-router 的 history,location,match 三个对象传入,不需要一级级传入。例如 Redux,你可以使用 connect({})() 方法来将展示组件和 store 中的数据进行连接。 代码演示: import {withRouter} from ‘react-router-dom‘; class App extends React.Component { constructor() { super(); this.state = {path: ‘‘} } componentDidMount() { let pathName = this.props.location.pathname; this.setState(() => { return { path: pathName,} }) } render() { return ( <div> <h1>Hi! I‘m being rendered at: {this.state.path}</h1> </div> ) } } export default withRouter(App); 导出组件时,我使用 react-router-v4 的 withRouter() 来封装它。在 componentDidMount 这个生命周期中,我们使用 this.props.location.pathname 来更新我们的 state,由于我们使用了 withRouter 高阶组件,我们可以直接访问 this.props.locationlocation,而不需要直接将 location 作为 props 直接传入,非常方便。 Render callbacks 与高阶组件类似,render callbacks 或 render props 可以用来重用逻辑。 class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0,}; } increment = () => { this.setState(prevState => { return { count: prevState.count + 1,}; }); }; render() { return ( <div onClick={this.increment}>{this.props.children(this.state)}</div> ); } } class App extends React.Component { render() { return ( <Counter> {state => ( <div> <h1>The count is: {state.count}</h1> </div> )} </Counter> ); } } 在 Counter 类中,我们 render 中嵌入 this.props.childrn 并将 this.state 作为参数。在 App 类下面,我们可以将我们组件包装在 Counter 组件中。 Counter 组件的本质是暴露了 children 这个外部属性,将 children 具体的渲染细节交个 Counter 的使用者,使用的时候只需要将组件传入到 Counter 的 children 中,当然可以使用其他参数,如果 children 不够的话。例如实现一个聊天列表每条消息有头像和消息内容,具体头像是圆是方,具体消息内容是文字是图片,都交给了外部使用者。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |