创建: 2019/05/01

Hello World
 

ReactDOM.render(
<p>sample</p>,
document.getElementById('root')
);
   
   
   
JSX简介
 插值

大括号 {}

● 内部可放任何JavaScript表达式

const jsxElement = <p sampleProp={0}>{buildName(people)}</p>;
 jsx也是表达式

被编译成函数

● 可以赋值给变量

const buildName = (people) => {
return `${people.sex}的${people.name}`
};
const people = {
name: '妖怪',
sex: '不男不女',
}
const jsxElement = <p sampleProp={0}>{buildName(people)}</p>;
 指定属性

和html一样, 但要用驼峰写法(因为JSX是JS)

● 赋值可以双引号可以用插值(不要组合起来用)

// 双引号
<p sampleA="0"/>
// 插值
<p sampleB={1}/>
 嵌套

● JSX内部可以嵌套JSX

<p>测试
<a src={link.url}>{link.text}</a>
</p>

● 对于空标签, 可以 /> 结尾

const blankElement = <p/>;
 自动转义

JSX的所有内容自动转义

● 可以直接插入用户输入内容, 不用担心安全问题

 JSX 表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用

// JSX
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// React.createElement
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
); // 实际生成
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
   
元素渲染
 根节点

该节点内的所有内容都将由 React DOM 管理

● 可以有任意多个根节点

 渲染
ReactDOM.render(reactDOM, dom)

将一个 React 元素渲染到根 DOM 节点中

● 参数

 reactDom  想要渲染的dom
 dom  渲染的位置
 更新已渲染的元素 

重新调用ReactDOM.render

● React自动对比新旧ReactDOM, 只更新变化的部分

   
组件&Props
 定义组件

组件名称必须以大写字母开头

● 函数组件

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

● class组件

 渲染组件  接收到的参数会作为props传入
 组合组件  组件可以互相嵌套
 Props 的只读性

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

● 需要实时变化的属性放入state

state&生命周期
 生命周期函数
 componentDidMount  DOM已渲染
 componentWillUnmount  DOM即将被清除
 state 

React通过this.state来检测自身是否被改变

● 更新用setState(), 不要直接修改State

this.setState({a:1})

如果要用到之前的props或states, 不可以直接在setState里面调用. 用函数

this.setState((state, props) => ({
counter: state.counter + props.increment
}));

● 只有构造函数可以给state赋值

class Sample extends React.Component {
constructor(props) {
super(props);
this.state = {...} // 构造函数处可以给state赋值
}
}

● setState()是浅合并

参数里没提到的保持原样

   
   
事件处理
 js关于事件处理相关

传送门

 

React 事件的命名采用小驼峰式

例:  onClick

 阻止默认事件

不能用return false

必须用 preventDefault

 添加事件 

一般不需要 addEventListener , 只需在渲染时添加监听器

● 监听函数设置成箭头函数, 以确保this正确

class Events extends React.Component {
constructor(props) {
super(props);
}
clickHandle = e => {
console.log(e);
};
render() {
return (
<div>
<h1>title: events</h1>
<p onClick={this.clickHandle}>click</p>
</div>
);
}
}

● 若不设置为箭头函数, 为确保this正确

 构造器里使用bind
constructor(props) {
super(props);
this.clickHandle = this.clickHandle.bind(this);
}
 在调用时使用箭头函数(不建议)

每次渲染都会生成创建不同的回调函数, 可能引起其他元素重新渲染

<button onClick={(e) => this.clickHandle(e)}>
 向事件函数传递参数

React的事件对象 e 会被作为第二个参数传递

 箭头函数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

如果通过箭头函数的方式,事件对象必须显式的进行传递

 Function.prototype.bind

通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
条件渲染
 阻止渲染  render内部返回null
 与运算符&&

a && b

若a可转换为true,则返回b;否则,返回a

 三项运算符

con ? a : b
   
列表&key
 构建列表组件
class ListKey extends React.Component {
constructor(props) {
super(props);
this.datas = new Array(10).fill(Math.random()*100).map((v, i) => {return v+i});
this.listItems = this.datas.map((v, i) => {
return (
<li key={i}>data: {parseInt(v)}</li>
);
});
}
render() {
return (
<div>
<h1>title: list & key</h1>
<ul>{this.listItems}</ul>
</div>
);
}
}
 key

key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

● 尽量在 map() 方法中的元素需要设置 key 属性

this.datas = new Array(10).fill(Math.random()*100).map((v, i) => {return v+i});
this.listItems = this.datas.map((v, i) => {
return (
<li key={i}>data: {parseInt(v)}</li>
);
});

● 数组元素中使用的 key 在其兄弟节点之间应该是独一无二的

● key 会传递信息给 React ,但不会传递给你的组件

需要key值的用其他属性名显示传递

<li key={i} mykey={i}>data: {parseInt(v)}</li>
   
   
表单
 受控组件

所有事件都需要添加处理函数

class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
}; this.handleInputChange = this.handleInputChange.bind(this);
} handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name; this.setState({
[name]: value
});
} render() {
return (
<form>
<label>
参与:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
来宾人数:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
   
   
   
状态提升
   将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中,便可实现共享 state。这就是所谓的“状态提升”
   
   
   
组合&继承
 包含关系

● 嵌套的组件全部在 props.children 里

● 预留placeholder可以用任何名字, 可以传入任何对象

function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
);
} function App() {
return (
<SplitPane
left={
<Contacts />
}
right={
<Chat />
} />
);
}
 特例关系

“特殊”组件可以通过 props 定制并渲染“一般”组件

function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
} function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" /> );
}
 继承  不需要使用
   
React哲学
 用 React 创建一个静态版本

渲染 UI 和添加交互分开

 确定 UI state 的最小(且完整)表示

通过问自己以下三个问题,你可以逐个检查相应数据是否属于 state:

  1. 该数据是否是由父组件通过 props 传递而来的?如果是,那它应该不是 state。
  2. 该数据是否随时间的推移而保持不变?如果是,那它应该也不是 state。
  3. 你能否根据其他 state 或 props 计算出该数据的值?如果是,那它也不是 state。
 确定 state 放置的位置

对于应用中的每一个 state:

  • 找到根据这个 state 进行渲染的所有组件。
  • 找到他们的共同所有者(common owner)组件(在组件层级上高于所有需要该 state 的组件)。
  • 该共同所有者组件或者比它层级更高的组件应该拥有该 state。
  • 如果你找不到一个合适的位置来存放该 state,就可以直接创建一个新的组件来存放该 state,并将这一新组件置于高于共同所有者组件层级的位置。
 添加反向数据流  回调

[WIP]React 核心概念的更多相关文章

  1. [React]核心概念

    本文是对React文档:核心概念部分的笔记,内容大致与文档相同. 文档链接 React哲学部分写的很好,务必要看 JSX JSX是JS的语法扩展,配合react使用,为JS和HTML的混写 JSX支持 ...

  2. react 教程—核心概念

    react 核心概念  : https://react.docschina.org/docs/getting-started.html(官网) 或  https://www.w3cschool.cn/ ...

  3. React 核心思想之声明式渲染

    React 发展很快,概念也多,本文目的在于帮助初学者理清 React 核心概念. React 及 React 生态 React 的核心概念只有 2 点: 声明式渲染(Declarative) 基于组 ...

  4. Redux 核心概念

    http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html .本文不是官方文档的翻译. ...

  5. fusionjs 学习二 核心概念

    核心概念 middleware 类似express 的中间件模型(实际上是构建在koa中间件模型上的),但是和koa 的中间件有差异 fusionjs 的中间件同时可以运行在浏览器页面加载的时候 se ...

  6. 深入理解Vue组件3大核心概念

    摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 Fundebug经授权转载,版权归原作者所有. 前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽 ...

  7. 领域驱动设计(DDD)部分核心概念的个人理解

    领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...

  8. Javascript本质第一篇:核心概念

    很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...

  9. [程序设计语言]-[核心概念]-02:名字、作用域和约束(Bindings)

    本系列导航 本系列其他文章目录请戳这里. 1.名字.约束时间(Binding Time) 在本篇博文开始前先介绍两个约定:第一个是“对象”,除非在介绍面向对象语言时,本系列中出现的对象均是指任何可以有 ...

随机推荐

  1. 正确安全清空在线慢查询日志slow log的流程 (转)

    1, see the slow log status; mysql> show variables like '%slow%'; +---------------------+--------- ...

  2. 把ASM下的HDD VM转换成ARM下Managed Disk的SSD VM

    在ASM下,要把HDD的VM转换成SSD的VM步骤非常复杂.需要手工把Disk从普通存储账户复制到高级存储账户.再通过这个Disk创建VM. 目前在有了ASM到ARM的迁移工具,以及Managed D ...

  3. Jmeter & TICK

    背景:   本来只是想在将Jmeter的测试结果写入InfluxDB, 但发现从InfluxDB V1.3后开始, 已经不支持Web Admin interface, 才发现InfluxData 搞了 ...

  4. maven配置的问题,maven的环境变量配置

    不要在用户变量处配置用户变量,直接将maven的bin文件夹路径配置到path环境变量

  5. 阿里巴巴开源项目: canal 基于mysql数据库binlog的增量订阅&消费

    背景 早期,阿里巴巴B2B公司因为存在杭州和美国双机房部署,存在跨机房同步的业务需求.不过早期的数据库同步业务,主要是基于trigger的方式获取增 量变更,不过从2010年开始,阿里系公司开始逐步的 ...

  6. $timeout()定时器

    非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇到 ...

  7. struts2中常用constant命令配置

    struts.objectFactory这个属性用 于说明Struts2的 对象池创建工厂,Struts2也有自己的对象池,就像Spring那样,在配置文件中你可以引用对象池中的对象,你可以借助于Sp ...

  8. 解决django不能以本机ip地址访问

    在使用django框架来架设网站时,我们测试一般是通过django的开发服务器来完成,但是我们可以看到生成的地址是127.0.0.1:8000这样的话,我们在外网就无法访问了. 解决办法是通过传入第三 ...

  9. Py修行路 Pandas 模块基本用法

    pandas 安装方法:pip3 install pandas pandas是一个强大的Python数据分析的工具包,它是基于NumPy构建的模块. pandas的主要功能: 具备对其功能的数据结构D ...

  10. [转]RabbitMQ三种Exchange模式(fanout,direct,topic)的性能比较

    RabbitMQ中,所有生产者提交的消息都由Exchange来接受,然后Exchange按照特定的策略转发到Queue进行存储 RabbitMQ提供了四种Exchange:fanout,direct, ...