React前端组件化开发

JerryXia 发表于 2019-01-13 23:56:56 , 阅读 (0)

我们将上面的页面分为几个比较细粒度的组件为:

<LoginPage>	<Header>		<HeaderLink icon="icon icon-left-nav" />        	<HeaderTitle title="快捷登录" />	</Header>	<Body>		<Input type="text" cls="mobile" placeholder="请输入手机号" />	        <SendCodeBtn mobile={this.state.mobile}/>	        <Input type="text" cls="valid-code" placeholder="请输入您的验证码" />	        <Button type="button" cls="btn btn-block btn-warning" >登录</button>	</Body></LoginPage>

可见，即使是简单的input元素，也用Input组件来封装，也是为了能够进行一些简单的定制化，如样式，事件等。

组件通信

对于父子级的组件之间，通过属性传递，回调等就能较好的通信，如

<Button type="button" cls="btn btn-block btn-warning" onTouch={this.onLogin}>登录</button>

而Button组件内部会在onTouchStart时回调其父组件传递的属性onTouch:

var Button = React.createClass({  render: function() {    return <button className={this.props.cls} onTouchStart={this.props.onTouch}>{this.props.children}</button>;  }});

对于同级别的组件，可以通过其父组件间接通信，即组件1触发事件，调用父组件方法，该方法再调用组件2某方法。

状态更新

当一个页面比较复杂时，会由很多组件组装起来，建议对于业务组件，将状态抽象到上层组件中进行统一管理，也便于页面中的组件能够通信，因为一旦状态更新，就会render，状态太混乱，造成不必要的UI渲染，或者错误的UI渲染。在业务组件编写中，可以尽量用props代替不必要的state，即让组件无状态，将状态更新交由外部组件去控制。

组件依赖

React本身并不支持组件依赖管理，即不能像RequireJs等模块化管理工具一样，能维护模块之间的依赖关系，比较简单的解决办法是将业务组件都concat到一个文件中，那么组件就能通过组合来调用其他组件。

使用webpack管理React组件

React大多第三方组件是遵循npm规范，即CommonJS规范，于是我们可以考虑使用webpack来管理React组件的依赖关系，

对于React组件管理，webpack可能基本配置就是

{    entry:{        login: ['./app/components/login/index.jsx', './app/components/login/main.jsx']    },    output: {        filename: '[name].js'    },    module: {        loaders: [            { test: /\.jsx$/, loader: 'babel-loader' }        ]    },    ...}

既然选择了npm规范，因此我们编写的组件也就必须遵循:

var React = require('react');// require other componentsvar Login = React.createClass({    ...});module.exports = Login;

的确React足够简洁，通过状态来自动进行UI渲染，并且通过diff算法对组件进行最小化DOM操作，使得性能可观，并且轻松进行组件化，开发出高可复用代码，值得一试。

[ 技术文章推荐 ]