标签搜索
搜索到
13
篇与
的结果
-
那些年忘掉的React 在长期使用Vue开发项目的我,渐渐忘记如何使用React!!React 是一个 Facebook 和 Instagram 用来创建用户界面（UI）的 JavaScript 库。很人多认为 React 是 MVC 中的V（图）。1.React项目的搭建!使用yeoman脚手架搭建npm install -g yeomannpm install -g genreator-react-webpack新建一个文件夹yo react-webpack启动项目 npm start项目到处搭建完成!React的使用state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而组件只能通过 props 来传递数据。 2.PropsTypeReact组件创建的时候，需要传入属性，我们可以使用使用PropTypes进行类型检查，您可以使用React.PropTypes在组件的道具上运行。React.PropTypes.array React.PropTypes.bool React.PropTypes.func React.PropTypes.number React.PropTypes.object React.PropTypes.string React.PropTypes.symbol React.PropTypes.node React.PropTypes.element React.PropTypes.instanceOf() React.PropTypes.oneOf() React.PropTypes.oneOfType() React.PropTypes.arrayOf() React.PropTypes.objectOf() React.PropTypes.shape() React.PropTypes.any 默认情况下，验证器将props视为可选属性。您可以使用isRequired确保在未提供道具时显示警告。 React.createClass({ propTypes: { // 可以声明 prop 为指定的 JS 基本类型。默认 // 情况下，这些 prop 都是可传可不传的。 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 所有可以被渲染的对象：数字， // 字符串，DOM 元素或包含这些类型的数组。 optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 来限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 指定的多个对象类型中的一个 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定类型组成的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定形状参数的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 以后任意类型加上 `isRequired` 来使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired, // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接 // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } } }, /* ... */ });或者（ES6） MyComponent.propTypes = { name:React.PropTypes.string };静态方法（属性）属于类级别的特征，所有实例都自动获取类级别的静态特征。React生命周期//用代码说明 class LifeCycle extends React.Component { constructor(props) { //React初始化 super(props); //调用父主件(constructor)构造器,就是继承constructor this.state = {str: "hello"};//定义初始状态 } componentWillMount() { //主件即将挂载阶段 alert("componentWillMount"); } componentDidMount() { //主件渲染完成 alert("componentDidMount"); } componentWillReceiveProps(nextProps) { //props发生变化时触发 alert("componentWillReceiveProps"); } shouldComponentUpdate() { //props和state变化后是否重新渲染主件 alert("shouldComponentUpdate"); return true; // 记得要返回true } componentWillUpdate() { //主件即将更新 alert("componentWillUpdate"); } componentDidUpdate() { //主件更新完成 alert("componentDidUpdate"); } componentWillUnmount() { //主件销毁阶段 alert("componentWillUnmount"); } setTheState() { let s = "hello"; if (this.state.str === s) { s = "HELLO"; } this.setState({ str: s }); } forceItUpdate() { this.forceUpdate(); } render() { //主件渲染阶段 alert("render"); return( <div> <span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span> <br /> <span>{"State:"}<h2>{this.state.str}</h2></span> </div> ); } } class Container extends React.Component { constructor(props) { super(props); this.state = { num: Math.random() * 100 }; } propsChange() { this.setState({ num: Math.random() * 100 }); } setLifeCycleState() { this.refs.rLifeCycle.setTheState(); } forceLifeCycleUpdate() { this.refs.rLifeCycle.forceItUpdate(); } unmountLifeCycle() { // 这里卸载父组件也会导致卸载子组件 React.unmountComponentAtNode(document.getElementById("container")); } parentForceUpdate() { this.forceUpdate(); } render() { return ( <div> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.propsChange.bind(this)}>propsChange</a> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.setLifeCycleState.bind(this)}>setState</a> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.unmountLifeCycle.bind(this)}>unmount</a> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a> <LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle> </div> ); } } ReactDom.render( <Container></Container>, document.getElementById('container') ); -
Webpack dev服务器代理 Webpack dev服务器利用http-proxy-middleware可选地将请求代理到单独的，可能是外部的后端服务器。示例配置如下。proxy: { '/api': { target: 'https://other-server.example.com', secure: false } } // In webpack.config.js { devServer: { proxy: { '/api': { target: 'https://other-server.example.com', secure: false } } } } // Multiple entry proxy: [ { context: ['/api-v1/**', '/api-v2/**'], target: 'https://other-server.example.com', secure: false } ]有关可用配置，请参阅http-proxy-middleware选项文档。代理一些URL可用于各种配置。一个例子是从本地开发服务器提供JavaScript文件和其他静态资源，但仍然向外部后端开发服务器发送API请求。另一个例子是在两个独立的后端服务器之间拆分请求，例如认证后端和应用程序后端。绕过代理（在v1.13.0中增加）代理可以根据函数的返回来选择性的绕过。该函数可以检查HTTP请求，响应和任何给定的代理选项。它必须返回一个false或者一个将被服务的URL路径，而不是继续代理请求。例如，下面的配置不会代理源自浏览器的HTTP请求。这与historyApiFallback选项类似：浏览器请求将正常接收HTML文件，但API请求将代理到后端服务器。proxy: { '/some/path': { target: 'https://other-server.example.com', secure: false, bypass: function(req, res, proxyOptions) { if (req.headers.accept.indexOf('html') !== -1) { console.log('Skipping proxy for browser request.'); return '/index.html'; } } } }重写代理请求的URL（在v1.15.0中增加）对代理的请求可以通过提供一个函数来选择性的重写。该功能可以检查和更改HTTP请求。例如，下面的配置将重写HTTP请求以删除/apiURL开头的部分。proxy: { '/api': { target: 'https://other-server.example.com', pathRewrite: {'^/api' : ''} } }请注意，这pathRewrite是来自http-proxy-middleware的一项功能，因此请查看他们的文档以获取更多配置。代理本地虚拟主机看起来，http-proxy-middleware预解析本地主机名localhost，你需要以下配置来修复代理请求：var server = new webpackDevServer(compiler, { quiet: false, stats: { colors: true }, proxy: { "/api": { "target": { "host": "action-js.dev", "protocol": 'http:', "port": 80 }, ignorePath: true, changeOrigin: true, secure: false } } }); server.listen(8080);
-
React受控与非受控组件 React内部分别使用了props, state来区分组件的属性和状态。props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变。而state维持组件内部的状态更新和变化, 组件渲染出来后响应用户的一些操作,更新组件的一些状态。如果组件内部状态不需要更新,即没有调用过this.setState, 全部通过props来渲染也是没问题的, 不过这种情况不常见。本文所介绍的内容就是通过props和state的定义来谈谈React的受控组件和非受控组件。非受控组件顾名思义, 非受控组件即组件的状态改变不受控制.接来下我们以一个简单input组件代码来描述。import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class Demo1 extends Component { render() { return ( <input type="text"/> ) } } ReactDOM.render(<Demo1/>, document.getElementById('content'))在这个最简单的输入框组件里,我们并没有干涉input中的value展示,即用户输入的内容都会展示在上面。如果我们通过props给组件设置一个初始默认值,<input defaultValue={this.props.value}/>defaultValue属性是React内部实现的一个属性,目的类似于input的placeholder属性。ps: 此处如果使用value代替defaultValue,会发现输入框的值无法改变。受控组件上面提到过,既然通过设置input的value属性, 无法改变输入框值,那么我们把它和state结合在一起,再绑定onChange事件,实时更新value值就行了。class Demo1 extends Component { constructor(props) { super(props); this.state = { value: props.value } } handleChange(e) { this.setState({ value: e.target.value }) } render() { return ( <input value={this.state.value} onChange={e => this.handleChange(e)}/> ) } }这就是最简单的受控组件模型, 我们可以通过在onChange的回调里控制input要显示的值,例如我们设置input框只能输入数字this.setState({value: e.target.value.replace(/\D/g, '')})现在我们应该完全明白form表单中受控组件和非受控组件的关系。受控组件采取的理念类似于redux的单项数据流理念,即value值是在调用者上更新的。那么问题来了。。。最后的思考现在我们要实现一个简单的input的number类型组件,后面紧跟一个+的button按钮,将输入框内的数字每次加一。所以此处只能按照受控组件的理念来写import React, { Component } from 'react'; export default class extends Component { constructor(props) { super(props); this.state = { value: props.value } } handleChange(e) { this.setState({ value: e.target.value.replace(/\D/g, '') }) } plus() { const value = ++this.input.value this.setState({ value, }) } render() { return ( <div> <input value={this.state.value} onChange={e => this.handleChange(e)} ref={ref => this.input = ref} /> <button onClick={() => this.plus()}>+</button> </div> ) } }此处功能基本实现完全,但是发现使用此组件之后,面临了另一个问题,我们如何在外部获取到这个输入框的值。一种方法是给组件增加个getValue回调的props,每次value值变化都调用一次getValue,即在handleChange和plus函数里调用,但是存在一个问题是,调用者只能通过getValue被动获取值,而且value值得改变此时还是在组件内部自行变化,不符合受控组件原理,也不满足React单向数据流概念。另一种方法就是将input组件的将要改变的值传到调用者里面,由调用者来决定更不更新组件的值,即此时数据由被调用者input组件生成,传至调用者,调用者判断满足条件后决定更新,再将数据重新传入到被调用者里。而调用者与被调用者彼此之间建立的联系方式通过input组件的props和调用者的state。此时input组件的代码如下export default class extends Component { constructor(props) { super(props); this.state = { value: props.value } } componentWillReceiveProps(nextProps) { this.setState({ value: nextProps.value }) } handleChange(e) { this.props.onChange(e.target.value) } plus() { const value = ++this.input.value this.props.onChange(value) } render() { return ( <div> <input value={this.state.value} onChange={e => this.handleChange(e)} ref={ref => this.input = ref} /> <button onClick={() => this.plus()}>+</button> </div> ) } }代码中的this.props.onChange就是调用者内部的函数,通过setState来更新input组件的value值。
