React框架

Posted 2020-10-30 小小小梅子

# React框架

##梳理笔记：
**属性设置`style={{marginLeft:"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);
```