React框架

Posted 小小小梅子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React框架相关的知识,希望对你有一定的参考价值。

# 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);
```

以上是关于React框架的主要内容,如果未能解决你的问题,请参考以下文章

前端框架React

前端框架React、Vue对比

react 各种UI框架

React框架概述

React 、React.js、React Native三者关系

浅谈web三大框架优缺点及适用场景之React框架