关闭
当前搜索:

React(17)异步组件

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

React(16)包裹标签 React.Fragment

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

React(15)ref

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

React(14)JSX 的一些语法说明

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

React(13)style 和 class

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

React(12)组合(类似 Vue 组件的插槽)和继承

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

React(11)组件通信

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

React(10)React表单元素应用方法大全

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

React(9)列表渲染(对标Vue的 v-for)

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

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)......
阅读(50) 评论(0)

React(7)异步的数据更改(setState 是异步行为)

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

React(6)生命周期(组件生命周期、state生命周期)

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

React(5)组件复用

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

React(4)事件处理

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

React(3)变量使用、变量更新、父子组件变量传递

5、变量 被中括号包含。 let foo = 'world' class HelloWord extends React.Component { render() { return <div className={domClass}> Hello,{foo} </div> } } 6、组件......
阅读(58) 评论(0)
412条 共28页1 2 3 4 5 ... 下一页 尾页
    个人资料
    • 访问:414202次
    • 积分:8062
    • 等级:
    • 排名:第3066名
    • 原创:407篇
    • 转载:5篇
    • 译文:0篇
    • 评论:79条
    博客专栏
    最新评论