2018年02月_qq20004604

12月 08月 03月 02月 01月

原创 React（17）异步组件

26、异步组件当在React里使用异步组件时，核心知识是两个：webpack 如何异步加载其他模块：通过 require(['xxx'], function(module){})来实现；React 里如何使用异步加载的这个模块：参考正常使用模块时的做法；【异步加载】关于 webpack 的异步加载，可以查看我写的这一篇异步加载实战DEMO.简单来说，就是 requir...

2018-02-12 18:21:54 4680

原创 React（16）包裹标签 React.Fragment

24、包裹标签 React.Fragment在 Vue 里，我们会用 <template></template> 标签来包裹一些不能有父容器的复数同级标签。例如在 <tbody></tbody> 标签中，我们只能放置 <tr></tr>标签，假如我们同时有多个 <tr> 标签被赋值给一个 JSX 变量，那么

2018-02-12 18:20:58 12976

原创 React（15）ref

23、ref用过 Vue 的同学，在使用 React 的 ref 时，注意不要混淆。在 Vue 中，ref 绑定的 DOM 元素，可以直接在组件实例里，通过 this.$refs.xxx 来获取。但是在 React 中，ref 的属性的值，是一个函数；函数的参数是当前 DOM 标签，或是组件实例；于是你可以在函数体内，通过 this.xxx = xxxx 来将该 DOM 赋值给...

2018-02-12 18:20:29 1192

原创 React（14）JSX 的一些语法说明

22、JSX【1】标签名可以是对象的属性（前提对象属性是一个组件）这种情况下，对象和属性的首字母，可以不大写（但建议大写，以作区分）let MyDom = { my() { return <p>这是一行</p> }}class MyInput extends React.Component { render(...

2018-02-12 18:19:53 312

原创 React（13）style 和 class

20、style 写法JSX里，写 style 属性，有几点需要注意：以 k-v （对象）形式来写 style 属性（如果直接写在 html 标签里，容易以为是双大括号，事实上还是单大括号）；key 使用驼峰写法；值是字符串；如果想混合多个属性，需要先通过例如 Object.assign() 将其混合为一个对象，再使用。不能使用数组或写 2 个 style={} 来实现；...

2018-02-12 18:19:19 689

原创 React（12）组合（类似 Vue 组件的插槽）和继承

18、组合（类似 Vue 组件的插槽）在Vue中，假如我们需要让子组件的一部分内容，被父组件控制，而不是被子组件控制，那么我们会采用插槽的写法 <slot></slot> 在 React 里也有类似的写法，父组件写法是相同的，但子组件是采用 {this.props.children} 来实现。示例：class MyChild extends React....

2018-02-12 18:18:47 7269

原创 React（11）组件通信

17、组件通信这个很好理解，我们开发常面对几种情况：子组件需要使用父组件的值：通过标签传入，props取值，如：<Status temperaature={this.state.temperaature}></Status>父组件需要使用子组件的值：不能直接将父组件值传入子组件并在子组件修改（不好），应采用父组件传函数到子组件，子组件调用父组件的该函...

2018-02-12 18:18:10 450 1

原创 React（10）React表单元素应用方法大全

16、表单总结写前面值的改变，通过 onChange 事件触发（包括文字输入框、radio、checkbox）；选中与否，通过设置 HTML 元素的 checked 等于一个符合要求的 state 的值（因此表达式结果为 true，于是 checked='true' 就是选中），来实现。【form】标签：如果用 form 标签的话，在通过 submit 按钮提交时，会自动触发...

2018-02-12 18:17:41 663

原创 React（9）列表渲染（对标Vue的 v-for）

15、列表渲染（对标Vue的 v-for）【实现思路】基础：数组的元素是 JSX 语法的 DOM，该数组作为 JSX 语法的 DOM，可以自动拼起来；实现：遍历数组，然后将将数组元素变为 JSX 语法的 DOM，得到一个新的数组（元素是 JSX 的 DOM），将这个新数组作为变量插入到渲染元素中即可。如以下代码：class HelloWord extends React....

2018-02-12 18:12:41 4702

原创 React（8）条件渲染（类似 Vue 的 v-if）

14、条件渲染（类似 Vue 的 v-if）讲道理说，React 本身的条件渲染，没有 Vue.js 用起来舒服。Vue.js 只需要在标签上添加 v-if 或者 v-show 就行，但 React 就比较麻烦了。class HelloWord extends React.Component { constructor(props) { super(props)...

2018-02-12 18:12:02 20499 5

原创 React（7）异步的数据更改（setState 是异步行为）

与Vue不同，React的设置变量是异步的。13、setState 是异步行为 setState()这是一个异步操作，如：class HelloWord extends React.Component { constructor(props) { super(props); this.state = { co...

2018-02-12 18:11:21 3496

原创 React（6）生命周期（组件生命周期、state生命周期）

12、生命周期参考链接：React组件生命周期小结两个生命周期，分别是组件的生命周期，和状态变更的声明周期组件结构：父组件套用子组件初次渲染：constructor 【父组件】构造函数componentWillMount 【父组件】挂载前render 【父组件】渲染constructor 【子组件】构造函数componentWillMount 【子组件】挂载前...

2018-02-12 18:10:16 777

原创 React（5）组件复用

11、组件复用同一个组件可以同时插入多个到父组件中，并且各个组件的状态是独立的。（和Vue的组件是一个道理，用法也类似）class HelloWord extends React.Component { constructor(props) { super(props); this.state = { count: 0 ...

2018-02-12 18:09:14 505

原创 React（4）事件处理

10、事件处理事件的 this注意，事件触发的 this，默认指向的 undefined；所以请手动绑定 this 给事件相应函数。比如：this.clickCount = this.clickCount.bind(this) onChange 事件输入框获取修改后的值，通过 onChange 事件。假如事件的参数是 e，那么 e.target 获取到...

2018-02-12 18:08:27 379

原创 React（3）变量使用、变量更新、父子组件变量传递

5、变量被中括号包含。let foo = 'world'class HelloWord extends React.Component { render() { return <div className={domClass}> Hello，{foo} </div> }}6、组件...

2018-02-09 18:20:17 16495

原创 React（2）React的嵌套和组件实例

3、嵌套被嵌套的目标可以是函数或者类，需要以大写字母开头：函数是 return 的返回值，类是 render 函数的返回值；示例：// 被嵌套function Foo() { return <h3>这是一个h3标签</h3>}// 嵌套到目标ReactDOM.render( <div> <Foo...

2018-02-09 18:19:00 927

原创 React（1）安装和基本示例

0、本项目的DEMOhttps://github.com/qq20004604/react-demo1、安装推荐使用 DEMO 的 package.json 配置来安装npm install运行（HMR）：npm run dev单独安装npm install --save react react-domnpm i --save babel-preset...

2018-02-09 18:17:56 452