React学习浅析

写在前面：参考网上学习教程，进行知识点归纳

React 是一个用于构建用户界面的JAVASCRIPT库 ，不是MVC/MVVM结构

React 特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。 直接声明所有dom元素和属性
• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
• 3.灵活 −React可以与已知的库或框架很好地配合。
• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

MVC/MVVM结构的AngularJs,VueJs等通过双向数据绑定实现DOM操作，开发效率提高，但使用了大量的事件绑定，执行效率下降。

出现ReactJS 使用虚拟DOM（JS表示DOM节点） 兼并开发效率与执行效率

自定义组件

< script src = " https://cdn.bootcss.com/react/15.4.2/react.min.js " ></ script > < script src = " https://cdn.bootcss.com/react/15.4.2/react-dom.min.js " ></ script > < script src = " https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js " ></ script >

JSX语法 类似于XML的JavaScript语法

如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

快速构建项目

$ npm install - g create - react - app$ create - react - app my - app$ cd my - app / $ npm start

ReactDOM.render() //渲染

ReactDOM.render(<h1>aaaaaa</h1>,document.getElementById('foot'));

JavaScript 表达式写在花括号  {}  中

在 JSX 中不能使用  if else  语句，但可以使用  conditional (三元运算)  表达式来替代

React 推荐使用内联样式。我们可以使用  camelCase  语法来设置内联样式. React 会在指定元素数字后自动添加  px  。

注释需要写在花括号中

1、在标签内部的注释需要花括号

2、在标签外的的注释不能使用花括号

JSX 允许在模板中插入数组，数组会自动展开所有成员

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

要渲染 React 组件，只需创建一个大写字母开头的本地变量 。 React.createClass  方法用于生成一个组件类 

var HelloMessage = React . createClass ({ render : function () { return < h1 > Hello World ！</ h1 >; } }) ;

一个组件类必须要实现一个 render 方法， render 渲染

这个 render 方法必须要返回一个 JSX 元素。

必须要用一个外层的 JSX 元素把所有内容包裹起来,返回并列多个 JSX 元素是不合法的.

如果我们需要向组件传递参数，可以使用  this.props  对象

使用 this.props.xx

复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离

注意:

由于 JSX 就是 JavaScript，一些标识符像  class  和  for  不建议作为 XML 属性名。作为替代，React DOM 使用  className  和  htmlFor  来做对应的属性

State Props

getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

state 和 props 主要的区别在于  props  是不可变的

定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据

通过 getDefaultProps () 方法为 props 设置默认值

我们可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。

setState 是一个异步方法，需要render执行的时候才会触发

... handleClickOnLikeButton () { this .setState({ count : 0 }) // => this.state.count 还是 undefined this .setState({ count : this .state.count + 1 }) // => undefined + 1 = NaN this .setState({ count : this .state.count + 2 }) // => NaN + 2 = NaN }...

当你调用  setState  的时候， React.js 并不会马上修改 state 。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到  state  当中，然后再触发组件更新。：在使用 React.js 的时候，并不需要担心多次进行  setState  会带来性能问题

props

props  的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的  props ，否则组件的  props  永远保持不变。

state  是让组件控制自己的状态， props  是让外部对组件自己进行配置 。

http://huziketang.com/books/react/lesson11

没有  state  的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。前端应用状态管理是一个复杂的问题

当您要聚合来自多个子节点的数据 或 使两个子组件之间相互通信时， 提升 state(状态) ，使其存储在父组件中。父组件可以通过 props(属性) 把 state(状态) 传递回子组件，以使子组件始终与父组件同步。

尽量少地用  state ，尽量多地用  props

函数式组件就是一种只能接受  props 和提供  render  方法的类组件。

如果你在constructor中要使用this.props,就必须给super加参数：super(props)；

http://huziketang.mangojuice.top/books/react/lesson12

React. PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告

React组件API

• 设置状态：setState
• 替换状态：replaceState
• 设置属性：setProps
• 替换属性：replaceProps
• 强制更新：forceUpdate
• 获取DOM节点：findDOMNode
• 判断组件挂载状态：isMounted

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

React.js 控制组件在页面上挂载和删除过程里面几个方法：

• componentWillMount：组件挂载开始之前，也就是在组件调用 render 方法之前调用。
• componentDidMount：组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。
• componentWillUnmount：组件对应的 DOM 元素从页面中删除之前调用。

componentWillMount 用的较少，因为它必须得是同步的； componentDidMount 用的较多，基本上调ajax，改DOM的事情都放这里

-> constructor() -> componentWillMount() -> render() // 然后构造 DOM 元素插入页面 -> componentDidMount() // ...// 即将从页面中删除 -> componentWillUnmount() // 从页面中删除

生命周期的方法有：

• componentWillMount 在渲染前调用,在客户端也在服务端。在进入状态之前调用
• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

更新阶段的生命周期方法

• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 

可以在你确认不需要更新组件时使用。

• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

react中常用事件

焦点类事件

onFocus //获得焦点时触发onBlur //失去焦点时触发

表单类事件

onChange //内容改变时触发onInput //事件在用户输入时触发onSubmit //提交时触发

键盘类事件

onKeyDown //按下键盘按键时触发onKeyPress //按下键盘按键并松开时触发onKeyUp //放开先前按下的 按键时触发

触摸类事件

onTouchCancel //一般在一些高级事件发生时，触发取消touch事件。例如暂停游戏，存档等。onTouchEnd //移走手指时触发onTouchMove //移动手指时触发onTouchStart //按下手指时触发

用户界面事件

onScroll //元素滚动时执行 JavaScript

滚轮事件

onWheel //事件在鼠标滚轮在元素上下滚动时触发。

剪贴板事件

onCopy //copy元素内容时触发onCut //内容剪切时触发onPaste //粘贴时触发

鼠标类事件

onClickonContextMenuonDoubleClickonDragonDragEndonDragEnteronDragExitonDragLeaveonDragOveronDragStartonDroponMouseDownonMouseEnteronMouseLeaveonMouseMoveonMouseOutonMouseOveronMouseUp

不同的是 React.js 中的  event  对象并不是浏览器提供的，而是它自己内部所构建的。React.js 将浏览器原生的  event  对象封装了一下，对外提供统一的 API 和属性，这样你就不用考虑不同浏览器的兼容性问题。

this

 React.js 调用你所传给它的方法的时候，并不是通过对象方法的方式调用（ this.handleClickOnTitle ），而是直接通过函数调用 （ handleClickOnTitle ），所以事件监听函数内并不能通过  this  获取到实例。

bind

bind  会把实例方法绑定到当前实例上，然后我们再把绑定后的函数传给 React.js 的  onClick  事件监听。

bind  不仅可以帮我们把事件监听方法中的  this  绑定到当前组件实例上；还可以帮助我们在在渲染列表元素的时候，把列表元素传入事件监听函数当中

AJAX

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。

当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

同样，如果使用到了定时器，也可以这样使用。先使用componentDidMount来设置延时，再使用 componentWillUnmount 进行取消

表单与事件

父子组件传值 “数据绑定”

onChange  方法将触发 state 的更新并将更新的值传递到子组件的输入框的  value  上来重新渲染界面。

你需要在父组件通过创建事件句柄 ( handleChange ) ，并作为 prop ( updateStateProp ) 传递到你的子组件上。

Refs

Ref  ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

父子组件传值的方式

1.父组件通过state向子组件传值，子组件通过props获取父组件值

2.父组件向子组件传递方法，子组件通过props获取

3.父组件调用子组件中的方法，是使用父组件的refs获取子组件的ref

React处理列表数据

在 React.js 处理列表就是用  map  来处理、渲染的。现在进一步把渲染单独一个用户的结构抽离出来作为一个组件

对于用表达式套数组罗列到页面上的元素，都要为每个元素加上  key  属性，这个  key  必须是每个元素唯一的标识 。一般来说， key  的值可以直接后台数据返回的  id ，因为后台的  id  都是唯一的。 键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识。一般都是列表的数据需要使用key

当某个状态被多个组件 依赖 或者 影响 的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用  props  传递 数据或者函数 来管理这种 依赖 或着 影响 的行为。