React学习笔记_dangerous inner-CSDN博客

本文链接：https://blog.csdn.net/hanhantianfdengshuai/article/details/78640777

React

Facebook，于2013年开源。更新DOM，响应事件。

React组件的创建和复合

JSX

JavaScript XML，组件内部构建标签的类xml语法。
eg1：
React.DOM.h1({className:’question’},’Questions’);
eg2:
React.createElement(‘h1’,{className:’question’},’Questions’);
eg3:

Questions

自定义组件

var Divider = React.createClass({
    render: function(){
        return (
            <div className="divider">
                <h2>Questions</h2>
            </div>
        )
    }
})

动态值，{}

    <h2>{text}<h2>   //text，基本类型
    <h2>{dateToString(new Date())}</h2>  //function
    <h2>{array}</h2>  // var array = ['hello','world']，自动求值

子节点

开始标签和结束标签之间的所有节点都保存在this.props.children了
<Divider>Questions</Divider> <h2>this.props.children</h2> //组件中的子节点可以引用
动态引入即将属性设置的值用JavaScript的变量替代

条件判断

<div className={if(isComplete){'is-complete'}}></div>
<div className={this.state.isComplete?'is-complete':''}></div>
<div className={this.state.isComplete && 'is-complete'}></div>

非DOM属性(key、ref、dangerouslySetInnerHTML)

key（键）：可选的，唯一标识符，匹配对应的值并进行相应的移动，且不需要完全重新渲染DOM。渲染性能
ref（引用）：允许父组件在render方法之外保持对子组件的一个引用
render: function(){ return (<div> <input id="myInput"/> </div>) } this.refs.myInput.getDOMNode() //this.refs.myInput，React创建DOM的描述对象
dangerousInnerHTML(设置原始的HTML)：
render: function(){ var htmlString = { _html: '<span>an html string</span>' }; return <div dangerouslySetInnerHTML = {htmlString}></div>; }

事件

React自动绑定了组件所有方法的作用域

特殊属性

JSX转换为原生的javascript函数，表单标签添加for，自定义的class需要使用htmlFor,className

样式

内联样式规范化成驼峰形式，与js中DOM的style属性一致
var style = { borderColor: "#999", borderThickness: '1px' }; <div style={style}>...</div>

不用JSX的React

定义组件类
创建一个为组件类产生实例的工厂
创建工厂来创建ReactElement实例

创建React元素

React.DOM.* 命名空间中提供了一系列的工厂。
预定义的工厂都是React.createElement的简写，预置了第一个参数而已
React.createElement(‘div’);
React.DOM.div();

组件的生命周期

1、一个实例初次被创建，
getDefaultProps //首次使用组件类时
getInitialState
componentWillMount
render
componentDidMount
后续应用getInitialState、componentWillMount、render、componentDidMount
2、存在期，应用状态的改变，组件逐渐受到影响
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
3、销毁&清理期
componentWillUnmount

创建期职责

getDefaultProps
未被父类组件指定props属性的新建实例，这个方法返回的对象将为实例设置默认的props值
注意：任何复杂的值，如对象和数组，在所有的实例中共享
getInitalState
对于组件的每个实例，仅且调用一次，可初始化每个实例的state，this.props
componentWillMount
完成渲染之前被调用，render方法调用前可更改state
render
创建一个虚拟DOM，表示组件的输出。render方法需满足
访问数据：this.props和this.state
可返回null、false或者任何React组件
只有一个顶级组件
纯净，不能改变组件的状态或修改DOM的输出
ComponentDidMount
渲染后，可通过this.getDOMNode()访问render创建的DOM实例
/** 访问原始DOM的生命周期钩子，使用计时器或自定义jquery插件时，将方法挂载到这个方法上 */ render: function(){ return <input .../> } componentDidMount: function(){ $(this.getDOMNode()).autocomplete({ source: datasource }); }

存在期

事件处理器 =》改变应用的state =》新的state流入组件树
componentWillReceiveProps()
组件的父组件改变了props，将被调用，获得更改props对象及更新state的机会
shouldComponentUpdate
在组件渲染时精确优化，让它更快。
确定它的任何子组件不需要渲染新的props或者state，该方法会返回false。false告诉React跳过调用render方法，以及位于render前后的钩子函数。(componentWillUpdate和componentDidUpdate)
componentWillUpdate:
组件渲染之前调用，不应该在该方法中更新state或者props，借助componentWillReceiveProps方法更新
componentDidUpdate
提供更新已经渲染好的DOM机会

销毁&清理期

componentWillUnmount
组件被移除之前被调用，定时器，事件的监听器可被销毁

反模式

组件的state值和它所基于的prop不同步，无法了解到render函数的内部结构时，定义为一种反模式。
getDefaultProps(){ return { date: new Date() }; } getInitialState(){ return { day: this.props.date.getDay() } ; } render(){ return <div>Day: {this.state.day}</div> }

数据流

顶层组件的某个prop改变了，React会递归地向下遍历整棵组件树，重新渲染所有使用这个属性的组件。
内部状态，接受props和state作为参数，返回虚拟的DOM表现

props，任意类型的数据

```
<ListSurveys surveys={surveys} />
render(){
    var props = {
        one:'foo',
        two:'bar'
    };
    return <SurveyTable {...props} />
}

<a className='button save' onClick={this.handleClick}>Save</a>
```

PropTypes

定义配置对象，极好的方式描述组件的API

getDefaultProps

可为组件设置属性的默认值，针对非必须属性。

State

state与props的区别在于state只存在于组件的内部
getInitState，设置state的默认值，setState，更改state的值
state：只保存最简单的数据，勾选状态，是否显示的bool值
props: 数据源

事件处理

绑定事件处理器，命名与原生JavaScript规范一致，各种事件类型，事件系统。
事件和状态，setState和replaceState修改状态，replaceState用传入的对象替换原先的对象，setState仅影响更改的对象的某个k状态值。

组件的复合

“`
var AnswerRadioInput = React.createClass({
propTypes:{ //添加动态属性
id: React.PropTypes.string,
name: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired,
value: React.PropTypes.string.isRequired,
checked: React.PropTypes.bool,
onChanged: React.PropTypes.func.isRequired //监听用户更改
},
getDefaultProps: function(){
return {
id: null, //非必需的属性赋予默认值
checked: false,
…
}
},
getInitialState: function(){
var id = this.props.id?this.props.id:uniqueId(‘radio-‘);
return {
checked: !!this.props.checked,
id: id, //追踪状态，保持每个id都是唯一的
name: id
}
},
handleChanged: function(e){
var checked = e.target.value;
this.setState({
checked : checked
});
if(cheked){
this.props.onChanged(this.props.value);
}
},
render: function(){
return (

mixin

“`javascript
var Timer = React.createClass({
getInitialState: function(){
return {secondsElapsed:0};
},
tick: function(){
setState({secondsElapsed : this.state.secondsElapsed+1});
},
componentDidMount: function(){
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function(){
clearInterval(this.interval);
},
render: function(){
return (

Seconds Elapsed: {this.state.secondsElapsed}

)
}
});
var Timer = React.createClass({
mixins: [IntervalMixin(1000)], //混合进组件类中的对象
getInitialState: function(){
return {secondsElapsed:0};
},
onTick: function(){
this.setState({secondsElapsed: this.secondsElapsed+1});
},
render: function(){
return (

Seconds Elapsed: {this.state.secondsElapsed}

)
}
});

var IntervalMixin = function(interval){
    return {
        componentDidMount: function(){
            this._interval = setInterval(this.onTick, interval);
        },
        componetWillUnmount: function(){
            clearIntreval(this.._interval);
        }
    }
}

//外界决定定时器
var IntervalMinXin =  {
    setInterval: function(callback, interval){
        vat token = setInterval(callback, interval);
        this._intervals.push(token);
        return token;
    },
    componentDidMount: function(){
        this._intervals = [];
    },
    componentWillUnmount: function(){
        this._intervals.map(clearInterval);
    }
}

var Since2014 = React.createClass({
    minxis: [IntervalMixin],
    componentDidMount: function(){
        this.setInterval(this.forceUpdate.bind(this), 1000);
    },
    render: function(){
        var from = Number(new Date(2014,0,1));
        var to = Date.now();
        return (
            <div>{Math.round((to-from) / 1000)}</div>
        )
    }
})
```
监听事件并修改state的mixin(flux store mixin)
上传mixin，负责处理XHR上传请求，将状态及上传的进度同步到state
渲染层mixin，

DOM操作

与一个没有用React的第三方类库整合
ref属性，访问负责控制DOM的组件
<canvas ref="mainCanvas"></canvas> // this.refs.mainCanvas访问到canvas组件，ref的赋值必须是唯一的
getDOMNode()方法访问到底层的DOM节点，不能在render中这样做，render是更新之前执行的方法，组件挂载之后再去使用.
事件处理器也可以在组件挂载后触发，也可在事件处理器中调用

整合非React类库

保持第三方类库的状态和React的状态之间同步是成功整合的关键。
autocomplete({ target: document.getElementById('cities'), data: [ "San Francisco", "St.Louis", "Amsterdam", "Los Angeles" ], events: { select: function(city){ console.log('select'); } } }) //为了将该类库封装到react中，需添加componentDidMount处理器 var AutocompleteCities = React.createClass({ render: function(){ return <div id="cities" ref="autocompleteTarget"></div> }, getDefaultProps: function(){ return: { data: [ "San Francisco", "St.Louis", "Amsterdam", "Los Angeles" ] } ; }, handleSelect: function(city){ console.log(city); }, componentDidMount: function(){ autocomplete({ target: this.refs.autocompleteTarget.getDOMNode(), data: this.props.data, events:{ select: this.handleSelect } }) } })