react.js笔记

 

　　　　　　React入门教程：

　　　　　　https://hulufei.gitbooks.io/react-tutorial/content/component.html

　　　　　　https://segmentfault.com/a/1190000002647357

　　　　　    http://www.cocoachina.com/webapp/20150721/12692.html

 

 　　　　　　React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

　　　　　　1:仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。

　　　　　　2:数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。

 　　　　

　　　　　JSX

　　　　　　JSX两个花括号：{}渲染成动态值，花括号指明了一个JavaScript上下文环境——或括号内的任何东西都会进行求值，得到的结果会被渲染为标签中的若干节点。

　　　　　　表达式写在{}中。

　　　　　　对于简单值，比如文本或者数字，你可以直接引用对应的变量。

 

　　　　Virtual DOM

　　　　　　当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。

　　　　　　当然如果真的这样大面积的操作 DOM，性能会是一个很大的问题，所以 React 实现了一个Virtual DOM，

　　　　　　组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 　　　　　

　　　　　　DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

 

　　　　　组件

　　　　　　对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：

1. 1. 　只能通过 this.props 和 this.state 访问数据（不能修改）

   2. 　可以返回 null,false 或者任何React组件

   3. 　只能出现一个顶级组件，不能返回一组元素

   4. 　不能改变组件的状态

   5. 　不能修改DOM的输出

　　　　　　render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM tree的结构的对象。react之所以效率高，就是这个原因。

　　　　　　多看看该文档，顺便提高英语阅读能力，哈哈 https://reactjs.org/docs/thinking-in-react.html

 

　　　　　　React.createClass 方法就用于生成一个组件类。

　　　　　　

 

　　　　　　1）获取属性的值用的是this.props.属性名

　　　　　　2）创建的组件名称首字母必须大写。

　　　　　　3）为元素添加css的class时，要用className。

　　　　　　4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。

 

 

　　　　　组件有两个核心概念：

• • • props
    • state

　　　　　　一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。

　　　　　　注意：组件生成的 HTML 结构只能有一个单一的根节点。

 

　　　　props

　　　　　　props 就是组件的属性，由外部通过 JSX 属性传入设置，

　　　　　　一旦初始设置完成，就可以认为 this.props 是不可更改的，

　　　　　　所以不要轻易更改设置 this.props 里面的值（虽然对于一个 JS 对象你可以做任何事）。this.props就是组件的属性集合。

　　　　state

　　　　　　state 是组件的当前状态，可以把组件简单看成一个“状态机”，根据状态 state 呈现不同的 UI 展示。

　　　　　　一旦状态（数据）更改，组件就会自动调用 render 重新渲染 UI，这个更改的动作会通过 this.setState方法来触发。

 

　　　　　　getInitialState是用来初始化state，handleClick是用来处理我们点击事件的。

　　　　　　通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。

　　　　　　我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值，代码如下：

　　　　　　

　　　　　　

 

　　　　　　在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。

　　　　　　一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。

实例化

当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：

1、getDefaultProps
2、getInitialState   方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。
3、componentWillMount
4、render
5、componentDidMount

当组件在服务端被实例化，首次被创建时，以下方法依次被调用：

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render

componentDidMount 不会在服务端被渲染的过程中调用。

 

存在期

此时组件已经渲染好并且用户可以与它进行交互，比如鼠标点击，手指点按，或者其它的一些事件，导致应用状态的改变，你将会看到下面的方法依次被调用

1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate

 

销毁时

componentWillUnmount

每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器。

当再次装载组件时，以下方法会被依次调用：

1、getInitialState
2、componentWillMount
3、render
4、componentDidMount

 

下图为React组件四条更新路径地总结：

测试例子原文地址：http://www.jianshu.com/p/4784216b8194

 

转载于:https://www.cnblogs.com/ty-smile/p/7665999.html