React 急急如律令

標籤：

1.ES6

ES5	ES6
var	var let const
function (){} function foo(){}	()=>{} foo(){}
function (){     foo:function(){} }	class A{     foo(){} } new A{}
var name=‘aa‘,       age=21; return{       name: name,       age: age }	var name=‘aa‘, age=21; return{name,age}
	module.exports=A

2.JQuery 2.1 查詢:

    $(‘#id‘)

    $(‘.class‘)

2.2 dom和jquery對象切換

let $div = $(‘#div‘),
    div = document.getElementById(‘div‘);
console.log($div === div)
..false
console.log(div === $div[0])
..true
console.log($(div) === $div)
..true

 

2.3 ajax

$.ajax({

      //content

});

2.4 promise

promise.done(fn).fail(fn).always(fn);

 

3.React 3.1 對象:

React

ReactDom

3.2 方法:

React.createClass({});

ReactDom.render(sources,target);

3.3特性: 3.3.1 state(狀態):

getInitialState(

return{

   key: value

}

)

setState({key: value});//不能用”=”賦值

事件—>狀態—>渲染

3.3.2 props(屬性):

getPropTypes(

return {

    key: value.isRequired//指定屬性的類型.是否必須

}

)

屬性由父級傳入,狀態由自己控制.

3.3.ref(內部Id):

render(){

return {

<p ref=‘text‘ >123</p>

<button onclick=onclick() />

}

onclick(){

this.refs.text.props.value:123

}

4.生命週期

getPropType();

getInitialState();

componentWillMount();

render();

componentDidMount();

componentWillUpdate();

render();

componentDidUpdate();

componentWillUnMount();

 

未完待續…

React 急急如律令