随笔分类 - react
摘要：###Fragments ####为什么需要fragments？ 先看一段错误示范的代码 import React from 'react' class Table extends React.Component{ render () { return( <table> <tr> <Cloumn><
阅读全文
摘要：###Refs转发 Ref转发是一项将ref自动地通过组件传递到其一子组件的技巧。对于大多数应用的组件来说，这通常是不需要的，但对于某些组件，尤其是可复用的组件库是很有用的。refs允许我们访问dom节点或者在react render函数中创建的react函数 ###转发Refs到DOM组件 考虑到
阅读全文
摘要：过去，组件内的Javascript错误会导致React的内部状态被破坏，并且在下一次渲染时候产生可能无法追踪的错误。这些基本上是由较早的其他代码(非react组件代码)错误引起的，但react没有提供一种在组件中优雅的处理这些错误的方式，也无法从错误中恢复。 ###错误边界 部分UI的错误不应该导致
阅读全文
摘要：我们先来看一个示例 import React from 'react' class Demp extends React.Component{ render () { return <Toolbar theme="dark"></Toolbar> } } function Toolbar(props
阅读全文
摘要：React有十分强大的组合模式，我们推荐组合而非继承来实现组件之间的代码重用 ###包含关系 有些组件无法提前知道他们子组件的具体内容，在SlideBar(侧边栏)和Dialog(对话框)等展现通用容器的特别容易遇到这样的情况 我们建议这些组件使用children prop来将他们的子组件渲染到结果
阅读全文
摘要：###状态提升 在react中，将多个组件中需要共享state向上移动到他们的最近共同父组件中，便可实现共享state，这就是所谓的状态提升 ###什么情况下需要使用状态提升 通常，多个组件需要反映相同的变化数据，这时就需要状态提升 ###示例 import React,{Component} fr
阅读全文
摘要：先来看下示例 import React ,{Component} from 'react' let defaultValue = { username:'qqq', password:'', sex:'1',//1,男 0，女 ah:["足球"], city:'咸阳', loveCity:[], d
阅读全文
摘要：###react列表 ####渲染多个组件 import React,{Component} from 'react' function NumberList () { const numbers = [1,2,3,4,5] const listItems = numbers.map(number
阅读全文
摘要：条件渲染 引言 我们知道react是用于构建用户界面的JavaScript库。可以用其创建拥有各自状态的组件，在由这些组件构建更加复杂的UI组件。但是在某些情况下，我们需要根据不同的 条件渲染不同的UI，实现不同的功能。react是用JSX来定义UI组件的，但是它不直接支持循环或条件表达式，即使这样
阅读全文
摘要：###React事件处理 在之前的博文中，我们知道怎么给react的class组件的 dom绑定事件了，现在我们在一起实现给react DOM绑定事件 给函数组件绑定事件 function FnEvent(){ function handleClick(e){ console.log('this i
阅读全文
摘要：在元素渲染章节中，我们了解了一种更新UI界面的方法，通过调用ReactDOM.render()修改我们想要的 元素 在上述代码中我们封装了一个clockCom的class组件，每次组件更新时候render方法都会被调用，但只要在相同的DOM节点中渲染,就 仅有一个ClockCom组件的class实例
阅读全文
摘要：什么是组件？ 组件允许你讲UI拆分为独立可复用的代码片段，并对每个片段进行独立的构思 组件，从概念上类似于JavaScript函数。它接受任意的入参(props)，并返回用于描述页面展示内容的React元素 函数组件与class组件 定义组件最简单的方式就是编写JavaScript函数 该函数是一个
阅读全文
摘要：Rect之元素渲染 如上述代码中所示，我们通过JSX语法创建的就是React元素，通过babel编译，将会变成一个JavaScript对象，(通过浏览器，我们可以查看到),React元素是构成React应用的最小块，描述了你在屏幕上想看到的内容 将一个React元素渲染为DOM 我们需要渲染Reac
阅读全文
摘要：什么是JSX 上面代码，像是JavaScript，也像是html，这就是jsx，一种JavaScript的语法扩展，在React中使用JSX来描述用户界面。JSX是在JavaScript内部实现的 为什么使用JSX 如果要在js里写HTML，就是创造一个一个的DOM对象，用js来写，会非常的冗余，并
阅读全文
摘要：怎么使用react 在网页中引入react npm下载后在项目中引入react 在网页中引入react addReact.html 上面代码中需要连个地方注意，第一，在最后一个` 安装create react app并创建my app npm install g create react app c
阅读全文
摘要：什么是react？ react是一个用于构建用户界面的JavaScript库 为什么说react被用来作为MVC中的V层？ react特点？ 声明式 React是创建交互式UI变得亲而一举。为你应用的每一个状态设计简洁的视图，当数据改变时React能够有效地更新并正确地渲染组件。以声明式编写UI，可
阅读全文
