reactJs 基础

react不是一个完整的mvc,mvvm框架。

react跟web components 不冲突  背景原理：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新

react的特点就是‘轻’

组件化的开发思路

应用场景：复杂场景下的高性能  重用组件库，组件组合

ReactDOM.render()是React最基本方法 ，用于将模版转为HTML语言，并插入指定的DOM节点。

React.createClass()方法 就用于生成一个组件类  每个组件类都必须有自己的 render： 方法，用于输出组件。

                                   注意：1 组件类第一个字母大写  2 组件类只能包含一个顶层标签 如用<div> 包裹

                 <HelloMessage name="John"> 组建的属性可以在 组件类的 this.props 对象上获取，this.props.name可以获取到

this.props.children 表示此组件的所有子节点  三种结果：1 没有子节点 undefined 2 有一个子节点 object   3 有多个子节点 array

React.Children.map() 遍历子节点

组件类的PropTypes 属性，用来验证组件实例的属性是否符合要求 

　　　　　　　　propTypes:{title:React.PropTypes.string.isRequired,}

getDefaultProps 方法用来设置组件属性的默认值  getDefaultProps:function(){return{title:'Hello World'};}

ref属性  可以从组件中获取真实DOM节点   父组件引用子组件

　　　　this.refs.[name] 返回真实的DOM节点 需要等到click事件后调用

var MyComponent = React.createClass({
     handleClick:function(){
         this.refs.myTextInput.focus();
},
render:function(){
   return(
     <div>
         <input type="text" ref＝”myTextInput“ />
         <input type = "button" value="Focus the text input" onClick = {this.handleClick} />
) 
}
})    

组件中getInitialState 方法用于定义初始化状态(对象)，可以通过this.state属性读取。

 

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

this.setState方法就修改状态值，每次修改后 自动调用this.render 方法，再次渲染组件。

this.props 表示那些一旦定义 就不再改变的特性；

this.state 是会随着用户互动而产生改变的

上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

 

引入解析jsx的文件  <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js'></script>  type=''text/javascript"

reactComponent 是指创建的dom节点

 

react component lifecycle的生命周期:

1 Mounted --- React.renderComponent()    React Components被render解析生成对应的DOM节点 并被插入浏览器的DOM结构的一个过程

 componentWillMount 前被调用 --> render --> componentDidMount  后被调用

 getDefaultProps()   

getInitialState() 初始化

2 Update --- setState() / setProps() 至render()   一个mounted的ReactComponents被重新render的过程

  componentWillUpdate / componentDidUpdate   / shouldComponentUpdate /componentWillReceiveProps

3 Unmounted --- React.unmountAndReleaseReactRootNode()  一个mounted的React Components对应的DOM节点 被从DOM结构中移除的这样一个过程

  componentWillUnmount

总结：每一个状态 react都封装了对应的hock函数

 

组件的生命周期：初始化——运行中——销毁

初始化：可使用的钩子

1  getDefaultProps  只调用一次，实例之间共享引用

2 getInitialState  初始化每个实例特有的状态，都需要调用

3  componentWillMount  render之前最后一次修改状态

4 render  只能访问this.props和this.state  不允许修改状态和DOM输出

5 componentDidMount  渲染完成之后触发，可对dom进行操作。

运行中：

1 componentWillReceiveProps 父组件修改属性触发，可以修改新属性，修改状态

2 shouldComponentUpdate  返回faulse 会阻止render调用

3 componentWillUpdate  不能修改属性和状态

4 render 只能访问this.props 和 this.state,不允许修改状态和DOM输出

5 componentDidUpdate 可以修改DOM

销毁：

componentWillUnmount

属性 组件自己不能修改属性，可以从父组件获取属性，父组件也可以修改它的属性，他也可以修改子组件的属性 ：本身具有的，属性的四种用方式：

1  <HelloWorld name=? />  出入键值对  "字符创"  “item”

 2 {“time”}{123}数字、字符串、等  var props={one:'123',two:321} <HeeloWorld{...props}/>   {...props}展开对象的方式，取到的是值;{props}此方法取到的是对象

3 {【1，2,3】}数组

4 {变量}

状态 只和自己相关 与父组件子组件都不相关，有自己维护 ：事物所处的状况，不断变化的

状态用法：

1 getInitialState:初始化每个实例特有的状态

2  setState：更新组件状态

setState-----diff-----dom

区分：组件在运行中需要修改的数据就是 状态。

 

极客react 

非dom节点：

1、 dangerouslySetInnerHTML = {rawHTML}

var rawHTML = {__html:"<h1>i'm inner HTML"}
React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>,  )

2、ref  

3、key  列表类相同的节点 li 一定要加上key值 <li key='1'></li><li key='2'></li>

事件用法：组件（1，React自有方法：render  、componentWillUpdate、componentDidMount

                       2. 用户定义方法：handleClick、handleChange、handleMouseover)

绑定事件处理函数：

触摸：onTouchCancel

onTouchEnd

onTouchMove

onTouchStart

键盘：onKeyDown

onKeyPress

onKeyUp

剪切：onCopy

onCut

onPaste

表单：onChange

onInput

onSubmit

焦点：onFocus

onBlur

UI元素：onScroll

滚动：onWheel

鼠标：onDrop/onDrag/onDragEnd/onDragEnter/onDragExit/onDragLeave/onDragOver/onDragStart

onClick/onContextMenu/onDoubleClick/onMouseDown/onMouseEnter/onMouseLeave/onMouseLeave/onMouseMove/onMouseOut/onMouseOver/onMouseUp

事件对象的属性：

事件和状态关联：

handleChange:function(e){this.setState({inputText:e.target.value})}

组件协同：

1 组件嵌套： 父子关系  父组件-属性-》子组件；子组件-委托（触发事件）-》父组件

2 mixin：React双向绑定Minxin

组件要可控：符合react的数据流；数据存储在state中，便于使用；

表单元素：

<label htmlFor="name">对应相应的input的id</label>

<input><textarea><select><option></option></select>

事件处理函数复用：

1、bind复用：

    handleChange:function(name,event){....}

　　{this.handleChange.bind(this,'input')}

2、name复用：

　　handleChange:function(event){var name=event.target.name}

　　{this.handleChange}

React性能调优：

提高性能的方式：虚拟DOM，diff算法，将dom操作减少到最小，但是

　　　　　　　　问题1：父组件更新默认出发所有子组件更新；解决方法：子组件覆盖shouldComponentUpdate方法，返回true，触发更新流程，生成新的虚拟DOM节点与之前的进行比较，不同则进行操作；返回false，自行解决是否更新。

　　　　　　　　问题2：列表类型的组件默认更新方式比较复杂；解决方法：给列表中的组件添加key属性

性能调优：分析性能热点

控制台输入React.addons.Perf.start()--->进行一次操作---->React.addons.Perf.stop()  ;完成后台记录消耗时间

　　　　　　查看记录结果：React.addons.Perf.printInclusive();

如何解决性能问题：1；PureRenderMixin判断是否需要进入更新流程，本质上就是判断状态和属性是否改变(只能处理原始值，不能处理对象）

　　在shouldComponentUpdate(nextProps,nextStates)内判断!shallowEqual(this.props,nextProps)||!shallowEqual(this.state,nextState);

2；不可变插件Immutability Helpers，实现js不可变对象

　　基本语法：update(obj,cmd)

组件嵌套：

 钩子函数：

初始化：getDefaultProps  只调用一次

getInitialState

componentWillMount  渲染之前最后一次修改状态this.setState({})，触发render()函数；

render

componentDidMount  操作或修改真正的dom

运行中：componentWillReceiveProps  父组件修改属性之前触发，此函数可以修改新属性、修改状态

shouldComponentUpdate  返回false，根据需要使用

componentWillUpdate ：不能修改属性和状态

render：只能访问this.props和this.state,不能修改

componentDidUpdate ：可以修改dom

销毁：componentwillUnmount  在删除组件之前进行清理操作，比如计时器和事件监听器，必须手动清理。方法1.在子组件中componentwillUnmount:function(){}  方法2:在子组件的handle函数中，调用：React.unmountComponentAtNode(document.getElementsByTagName('body')[0]);//传入的必须是装载入的节点。

React.findDOMNode()

react添加css动画：

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 引入react-addons-t

调用：return(<ReactCSSTransitionGroup transitionName="example">{items}</ReactCSSTransitionGroup>)

react添加js动画：

componentDidUpdate:function(){if(this.props.position){setTimeout(this.resolveSetTimeout,this.props.timeoutMs);}},

render:function(){var divStyle={marginLeft:this.state.position};return <div style={divStyle}>this will animate!</div>}})

React.render(<Positioner></positioner>,document.body);

React.render(<Positioner position={100} timeout={10}></Positioner>,document.body);第二次调用，改变属性值props，触发componentDIdUpdate();从而达到动画效果

项目实战：

　1.分析目标－确定开发顺序：页面上有组件－>组件能正常显示内容->内容的样式正确－>设置项可以正常工作－>交互功能正常

在jsx中使用循环，一般会用到Array.prototype.map

class Hello extends React.Component{
      render(){
         const arr = ['a','b','c'];
         return (
           <div>
             {arr.map((item,index) => {
       return <p key={index}> this is {item}</p>  
})}
    </div>
    )
    }
}        

参考链接：http://www.imooc.com/article/14500

代码分离：

page层  ./app/containers/Hello/index.jsx

subpage层  ./app/containers/Hello/subpage/...jsx

component层  ./app/components/...  把多个页面都可能用到的功能，封装到一个组件中，放到此目录下。

数据传递&数据变化

props:一般只用作父组件给子组件传递数据用，不能被自身修改。

每个页面引用Header时，设置独自的title属性值，<Header title='Hello页面'/>;而在子组件中这样取到 render(){return(<p>{this.props.title}</p>)}  

state:自身组件状态发生变化，constructor(props,context){super(props,context);this.state = {now:Date.now()}}  render(){return (<div><p>hello world {this.state.now}</p></div>)}}

智能组件&木偶组件

智能组件：./app/containers   简称“页面”，只对数据负责，只需获取数据、定义好数据操作的相关函数，然后将这些数据、函数直接传递给具体的实现组件。

木偶组件：做一些展示的工作，展示给用户。 ./app/components/...

性能检测优化：参考https://github.com/wangfupeng1988/react-simple-o2o-demo/tree/getready-redux-width-react   本地切换到对应的分支

1安装react的性能检测工具npm install react-addons-perf --save  在./app/index.jsx中import Perf from 'react-addons-perf'   if(__DEV__){window.Perf = Perf}

使用：Perf.start()开始检测，Perf.stop停止检测，Perf.printWasted()即可打印出浪费性能的组件列表。

2安装react的优化插件 PureRenderMixin，npm install react-addons-pure-render-mixin --save

使用：在constructor(props,context){super(props,context);this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);}}  重写组件shouldComponentUpdate函数，在每次更新之前判断props和state,如果有变化返回true。

3 Immutable.js优化：使用此来处理数据，实现js中不可变数据的概念。适用于数据结构层次很深（obj.x.y.a.b=10）其定义了新的语法，不轻易使用。

React-router

安装 npm install react-route --save

1 创建子页面./app/containers/App.jsx 所有页面的外壳 ./app/containers/Home等主页、列表页、详情页

2 配置router 创建./app/router/routerMap.jsx 文件

class RouteMap extends React.Component{
    updateHandle(){
        //每次router变化之后都会触发
   ｝
    render(){
        return (
            <Router history={this.props.history}  onUpdate={this.updateHandle.bind(this)}>
                <Route path='./'  component={App}>
                        <IndexRoute component={Home}/>
                        <Route path='list' component={list}/>
                        <Route path='detail/:id'  component={Detail}/>     //id表示参数
                        <Route path="*" component={NotFound}/>
                </Route>                                                  //route可以嵌套
            </Route>
        )
    }
}

3 使用Route

./app/index.jsx

import React from 'react'
import {render} from 'react-dom'
import {hashHistory} from 'react-router'

import RouteMap from './router/routeMap'

render(
    <RouteMap history={hashHistory}/>,         //hashHistory规定hash来表示router localhost:8080/#/list
    document.getElementById('root')
)

页面跳转

1 <link to='/list'>to list </link>

2 js跳转

return(<ul>

　　　　　　{arr.map((item,index) => {

　　　　　　　　return <li key={index} onClick={this.clickHandle.bind(this,item)}>js jump to {item} </li>})}

　　　　</ul>)}

clickHandle(value){

　　hashHistory.push('/detail/' + value)

}}

性能优化－－静态资源懒加载  huge-apps 

他将react-router本身和webpack的require.ensure结合起来，解决此问题。