- 博客(13)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 11 Component Composition
组件组合React有着十分强大的组合模式, 用以实现组件间代码的重用组件间关系决定着组件之前的组合关系包含关系对于例如侧边栏(Sidebar), 对话框(Dialog)这种通用容器来说，我们无法提前知晓其子组件的具体内容1. 使用特殊的prop: children prop来把子组件传递到渲染结果中去。function Sidebar(props) { return ( <div style={{color: props.color}}> {props.chi
2020-10-31 14:39:04
487
原创 10 Lifting State up
状态提升lifting child’s local state up to its parent’s local state当组件A与组件B共同使用相同数据, 数据存储在A与B的state中时可以将共用数据放到其最近的父元素C的state中去, 让C通过props传递给A与B这样, C的state是A与B的唯一数据源, 就保证了数据的一致性示例程序(温度转换)见: myapp>Calculator...
2020-10-30 15:40:30
207
1
原创 09 Forms
受控组件什么是受控组件与非受控组件？Controlled components & Uncontrolled components非受控组件：HTML原生表单元素, 例如input, textarea, select等受控组件React组件内部state成为表单组件的唯一数据源组件控制着/处理用户操作(即管理事件处理)被React以这种方式控制取值的表单输入元素称为"受控组件";与Vue中data作为表单元素唯一数据源、methods处理用户事件是类似的选择受控组件与否的建议:
2020-10-30 14:29:29
194
2
原创 08 Lists and Keys
Array.map()函数const numbers = [1, 2, 3, 4, 5]const doubled = numbers.map(number => number *2)同样地，通过数组的map函数将数组转换成React元素列表1. 组件中渲染列表function NumberList(props) { const numbers = props.numbers const items = numbers.map(number => { <li
2020-10-30 14:28:54
94
原创 07 Conditional Rendering
条件渲染：根据条件渲染不同组件/组件不同元素1. iffunction Usergreeting(props) { return <h1>Welcome back!</h1>}function Guestgreeting(props) { return <h1>Please sign in.</h1>}function Greeting(props) { const isLoggedIn = props.isLoggedIn if
2020-10-30 14:28:22
99
原创 06 Handling Events
1. 事件处理的不同点React事件的命名采用小驼峰camelCase方式，而非纯小写使用JSX语法时传入函数作为时间处理函数，而非字符串<!-- HTML --><button onclick="activateLasers()"> Activate Lasers</button><!-- REACT --><button onClick={activateLasers}> Activate Lasers</bu
2020-10-30 14:27:18
83
原创 05 Component State
1. 使用State更新渲染DOM03 React element 更新渲染一节中提到通过设置定时器重复调用ReactDOM.redner()渲染是不推荐的做法本节将通过State编写有状态的组件完成之前效果class Clock extends React.Component { constructor(props) { super(props) this.state = {date: new Date()} } componentDidMount() {
2020-10-30 09:37:52
91
原创 04 Component & Props
1. 组件定义组件将UI拆分成多个独立可复用的代码片段概念上类似于JS函数，接收任意入参(props)，返回React元素2. 组件类型函数组件function Welcome(props) { return <h1> Hello, {props.name} </h1>;}class组件class Welcome extends React.Component { render() { return <h1>Hello, {this.
2020-10-30 09:37:27
279
原创 03 React Element
1. React元素与DOM元素React元素是构成React应用的最小砖块React元素是开销极小的普通对象React组件是由React元素构成的React DOM负责更新DOM来与React元素保持一致2. React元素渲染成DOM元素<div id="root"></div>称上述div节点为根DOM节点，因为该节点内所有内容都将由React DOM管理要将React元素/组件渲染到根DOM节点中，只需要将其传入ReactDOM.render()co
2020-10-30 09:36:33
93
原创 02 JSX Intro
什么是JSX?JSX is short for Javascript Extension, similar to JSP in the follwing ways…JSP页面允许你在HTML页面通过<% %>写Java代码JSX页面允许你在HTML标签内通过{ }写JS代码为什么要使用JSX?怎样使用JSX?在JSX中嵌入变量const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>
2020-10-30 09:36:05
89
原创 01 Concept
React是什么React是一个声明式的用于构建用UI的JavaScript库React特点声明式：命令式？组件化一次学习 随处编写怎样学习入门边学边做：实践教程概念学习：教程文档创建demo的方式CDN方式引入unpkg的包使用集成的工具链推荐的工具链学习/创建一个新的SPA时：使用 Create React App在用Node.js构建SSR网站时：试试Next.js在构建面向内容的静态网站时：试试Gatsby打造组件库/将React集成到现有代码仓库：尝试
2020-10-30 09:35:23
88
原创 common ways to iterate through array
遍历数组的几种方法forconst arr = [1, 2, 3, 4, 5]for(let i = 0; i < arr.length; i++) { console.log(i, arr[i])}for-in// 数组for(let index in arr) { console.log(i, arr[i])}// emumerable objconst obj = { a:1, b:2, c:3, d: 'hello'}for(let prop in obj)
2020-10-29 20:46:45
85
原创 Ubuntu无法进入图形化界面 Oh no! system can not recover please logout and try later
场景：Ubuntu更换桌面背景图片，添加使用百度下载某一图片时(文件大小>1M)系统崩溃 无法进入桌面系统提示：oh no! ...system cant recover...please logout and try latter(差不多这个意思 没截图)原因猜测：可能是因为图片太大了系统提示 已经把这个问题发送给Ubuntu了解决办法：#1. logout后，Ctl+Alt+F2(/F3/F4/F5/F6)进入CLI界面，登录后对图形化界面软件进行修复(Ctl+
2020-10-09 17:16:04
4274
IBM-PC汇编语言程序设计(第二版)-学习札记.pdf
2019-06-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人