by 13 react回顾 - nuanxin1111/react GitHub Wiki

#React简介

##React是什么

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。
简而言之,React是一个库。

##解决的目标问题：

构建随着时间数据不断变化的大规模应用程序

#React使用

##数据的呈现

###响应式更新

伪代码

    constructor(){
        super();
        this.state = {num:0}
    }
    render(){
        return(
            <div>
                testDemo:<br/>
                <div>
                    num:{this.state.num}
                <div>
                <button onClick={()=>this.setState({num:++this.state.num})}>增加</button>
            </div>
        )
    }

效果:点击按钮，页面显示num的位置局部刷新

响应式更新特点:页面内容改编时，并非全部重新渲染
React内部会维护一颗dom树(类似div层次嵌套形成的树形结构)
简称为虚拟dom。

当页面跟state有关的数据更新时候，会触发render()方法重新渲染虚拟dom.
并在内部使用diff算法，比较虚拟dom与页面真实dom的差异,

###JSX

####什么是jsx

类似xml的一种js语法扩展，react帮用户将jsx转成js代码

####为什么使用jsx

简洁明了，逻辑结构清晰，利于规划,且没有改变js语义

####jsx Demo

设 Nav,Profile为两个组件
则app1 = <Nav color="blue"><Profile>click</Profile></Nav>
  app2 = React.createElement(Nav,{color:"blue"},
            React.createElement(Profile, null, "click")
        ); 

app1 约等于app2

####jsx注意的地方

html属性需要用data- 作为前缀
<div data-mydata="1">test1</div>
如若不加data- ,通过getDomNode操作dom时，无法获得对应属性

###事件系统

js中的onclick,onscroll在React中一样可以使用，不过要注意写法
统一采用驼峰命名规范，onClick,onScorll

当使用组件内部的方法时，为保证后续的操作需要将当前js上下文
中的this绑定到当前组件实例对象,es5中通常使用.bind(this)方法
例如<div onClick={this.myclick.bind(this)}>mydiv</div>
注意:<div onClick={this.myclick()}>mydiv</div>，这种写法会
导致函数调用

###组件其实是状态机

state改变=>界面改变

###哪些应该做为state

被用户触发改变的,如果可以通过存在的可以计算出来，则不必作为state

###表单组件

<input>,<textarea>,<option>

注意点：设置了value属性的<input>是受限组件，value不可改变

需要修改的话吧value设置的值用state保存，然后通过onChange
修改该state,需要设置默认值，可使用defaultValue.

###Refs and getDomNode

refs:获得组件实例的引用，需要组件已经被挂载上
getDomNode():获得对应的dom组件

<input type="text" ref="myTextInput" />
this.refs.myTextInput.getDOMNode().focus();

###组件常用生命周期

挂载,更新，移除  此处的状态是相对dom的

####常用的

getInitialState()－》用来初始化一些state,会在挂载前
被调用

componentDidMount() -> 组件挂载到dom中后，常用语
ajax请求数据，并修改state,重新渲染页面

#React 案例代码

by 13 react回顾 - nuanxin1111/react GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️