React框架
# React框架
##梳理笔记：
**属性设置`10px"}}`**
**添加自定义属性需要使用 data- 前缀**
**在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中**
**在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代**
```js
render(){
return(
<div>
<h1>{i == 1 ? \'True!\' : \'False\'}</h1>
</div>
)
}
```
**return()中只能有一个容器标签**
**在添加属性时， class 属性需要写成 className. for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。**
```js
{
this.filterData().map(item => {
return (
<li
onClick={() => {
this.completedTodo(item)
}}
className={item.completed ? "oncolor" : ""}
key={item.id}>{item.text}</li>
)
})
}
```
**onClick 等事件，与原生 HTML 不同，on 之后第一个字母是大写的**
**如果有元素内嵌，需要多行展示，则需要 return()**
##一. 特点
1. 声明式设计 −React采用声明范式，可以轻松描述应用。
2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活 −React可以与已知的库或框架很好地配合。
4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
##二. 组件
**注意：始终使用大写字母开始组件名称**（原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。**除此之外还需要注意组件类只能包含一个顶层标签**）
React将以小写字母开头的组件视为DOM标签。
例如：<div />表示一个HTML div标签，但<Welcome />表示一个组件
###创建组件的方式
```js
import React, { Component } from \'react\';
class Name extends Component {}
render(<Name />, root);
```
**向组件传递参数，使用 this.props 对象**`return <h1>Hello {this.props.name}</h1>;`
##三. 合成事件
**虚拟的事件机制，本质是事件委托**
React元素处理事件与处理DOM元素上的事件差异：
* React事件使用camelCase命名（小驼峰命名）
* 使用JSX，将传递函数作为事件处理函数{}，而不是字符串""。
* react阻止默认事件用`e.preventDefault();`，而不能用返回false的方式阻止默认事件
例,字符串形式：
```js
<button onclick="activateLasers()">
Activate Lasers
</button>
```
例,react事件处理形式：
```js
<button onClick={activateLasers}>
Activate Lasers
</button>
```
**箭头函数的使用**
```js
<input type="button" value="提交" onClick={(e) => {}} />
```
```js
x => x * x
上面的箭头函数相当于：
function (x) {
return x * x;
}
```
##四. State(异步)
**React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。**
##### state和props区别
* state可变
* props不可变
##伍. 组件的通信方式props
```js
将方法以参数的形式传递（filterData={this.filterData()）
<Select type={this.state.type} types={this.state.types} onClick={this.selet.bind(this)}/>
<Uls filterData={this.filterData()} onClick={this.onli.bind(this)} />
```
```js
设定默认值：
static defaultProps = {
type:"All",
types:[],
onClick:function(){}
}
```
```js
onClick={e => {
this.props.onClick(item)
}}
```
同源策略（协议 IP 端口）=> 跨域：针对浏览器端而言
img,link支持跨域，ajax不支持跨域
```js
<input ref={textInput => this.todoEle = textInput} type="text" />
取到输入框的值：
this.todoEle.value
```
##表单
**1.受控组件**
受控组件就是为某个form表单组件添加value属性；非受控组件就是没有添加value属性的组件；
```js
render: function() {
return <input type="text" value="Hello!" />;
}
```
存在问题：渲染后的input组件的用户交互，用户输入的任何值将不起作用，input输入框中的值始终为Hello!。这与HTML中input表现不一致.
**可以用defaultValue属性**
**2.非受控组件**
表现形式上，react中没有添加value属性的表单组件元素就是非受控组件。
`<input type="text" />`
非受控组件在底层实现时是在其内部维护了自己的状态state；这样表现出用户输入任何值都能反应到元素上。
使用情况：
* 受控元素，一般用在需要动态设置其初始值的情况；例如某些form表单信息编辑时，input表单元素需要初始显示服务器返回的某个值然后进行编辑。
* 非受控元素， 一般用于无任何动态初始值信息的情况； 例如form表单创建信息时，input表单元素都没有初始值，需要用户输入的情况
##生命周期
1. 装载
* constructor
* componentWillMount(可以使用 setState, 同时不会引起重绘)
* render
* componentDidMount(可以使用 setState)
2. 运行
* componentWillReceiveProps(可以使用 setState 同时不会引起重绘)
* **shouldComponentUpdate通过返回true或false来控制render()的重复渲染**
```js
shouldComponentUpdate(nextProps, nextState){
if(nextProps.count != this.props.count){
return true
}
return false
}
```
* componentWillUpdate
* render
* componentDidUpdate
3. 卸载
* componentWillUnmount
##redux
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
store--仓库，保存数据，操作数据的方法（行为）
action--对行为的一种描述
reducer--处理
dispatch--触发具体的action，接收action对象作为参数
1. 使用函数createStore创建store数据点
2. 创建Reducer。它要改变的组件，它获取state和action，生成新的state
3. 用subscribe监听每次修改情况
4. dispatch执行，reducer(currentState,action)处理当前dispatch后的传入的action.type并返回给currentState处理后的state，通过currentListeners.forEach(v=>v())执行监听函数，并最后返回当前 action状态
**应该把要做的修改变成一个普通对象，这个对象被叫做 action，而不是直接修改 state**
##mobx
1. 定义你的状态，让它们成为观察者(observable)
存储状态(Store state)可以是任何的数据结构，随你定义为：对象，数组，类，循环结构，引用都没所谓。但需要记住一点，就是：随着时间的变化，用MobX 去把它们定义成观察者(observable)
```js
import {observable} from \'mobx\'
let appState = observable({
timer: 0
})
```
2. 我们不需要让appState去观察什么。你现在就能创建视图(view)，每当appState的相关数据发生变化的时候，就会自动更新。MobX会采用最优的方式去更新你的视图。
```js
import {observer} from \'mobx-react\';
@observer
class TimerView extends React.Component {
render() {
return (<button onClick={this.onReset.bind(this)}>
Seconds passed: {this.props.appState.timer}
</button>);
}
onReset () {
//appState.resetTimer会在下一节完成
this.props.appState.resetTimer();
}
};
React.render(<TimerView appState={appState} />, document.body);
```
3. 修改状态
第三节要说的是修改状态。MobX和其他框架不同，它不会要求你去做什么事情，它只是帮助你去做简单的事情
```js
appState.resetTimer = action(function reset() {
appState.timer = 0;
});
setInterval(action(function tick() {
appState.timer += 1;
}), 1000);
```
- 上一篇 »react的一些思考
- 下一篇 »react