react學(xué)習(xí)筆記

1. Jsx語法

在html中屬性的值通過雙引號（字符串?dāng)?shù)據(jù)）或者大括號（表達式）

//雙引號
const a = ![](1.jpg)

//大括號
const x = "1.jpg"
const a = <img src={x} />

//有子元素的情況抬驴，都只能包含在同一個元素內(nèi)，與vue語法保持一致
const a = (
    <div>
        <h1>標(biāo)題</h1>
        <span>gogogo</span>
    </div>
)

注意：react對于jsx中的變量都會進行轉(zhuǎn)義闺属，以免xss攻擊

2. 渲染DOM

通過reactDOM.render方法來渲染dom節(jié)點绢馍，并且react元素一旦創(chuàng)建就是不可變的，唯一的辦法就是重新創(chuàng)建個新的元素然后重新通過ReacDOM.render去渲染，就是這么cool丛楚！??????。但是每次更新憔辫，不是統(tǒng)一將整個元素都更新趣些，都只會修改更新了的元素

function tick(){
  const ele = (
    <div>
        <h1>現(xiàn)在的時間是：{new Date().toLocaleTimeString()}</h1>
    </div>
  );
  ReactDOM.render(
    ele,
    document.getElementById('root')
  )
}
setInterval(tick,1000);

?

3. 函數(shù)組件開發(fā)

當(dāng)用戶看到用戶自定義的組件的時候，就會將jsx的屬性作為單個對象（props）傳遞給此組件

function Aiv(props){
  return <h1>hi,{props.name}</h1>
}
const e = <Aiv name = "haha" />;
ReactDOM.render(
    e,
    document.getElementById('root')
)

注意：自定義的組件的首字母必須為大寫贰您，否則不能識別

4. Props是只讀的

react雖然是非常靈活的坏平，但是有一條嚴格的規(guī)范：props是只讀的，雖然也可以改變锦亦，但是不推薦舶替。??????

比如：

//合格的形式
function Aiv (x, y){
    return x+y;
}
//不合格的形式，傳參x被修改了
function Aiv (x, y){
  x = x + y;
}

5. 類組件開發(fā)

注意事項：

1. 創(chuàng)建一個es6語法的class類杠园，并且繼承自React.Component
2. 里面有一個render()方法顾瞪，將原先函數(shù)組件的中的內(nèi)容，如第3點函數(shù)組件例子的內(nèi)容放到此方法中
3. props用this.props替換

class Aiv extends React.Component{
  render(){
    return <h1>hi,{this.props.name}</h1>
  }
}

PS：相比于函數(shù)組件抛蚁，類組件還多了本地狀態(tài)和生命周期掛鉤陈醒。??????

6. 增加本地狀態(tài)state

1. 將render中的this.props替換為this.state

   class Aiv extends React.Component{
     render(){
       return <h1>hi,{this.state.name}</h1>
     }
   }
   

2. 在類組件中增加一個constructor方法來初始化this.state

   class Aiv extends React.Component{
     constructor(props){
       super(props);
       this.state = {name:'hy'};
       
     }
     render(){
       return <h1>hi,{this.state.name}</h1>
     }
   }
   

7. 增加生命周期方法

此系列方法是為了拓展ReacDOM的渲染的不可變性。使用此方法可以動態(tài)的去改變dom瞧甩，讓我們拭目以待钉跷。

class Aiv extends React.Component{
  constructor(props){
    super(props);
    this.state = {name:'hy'};
    this.i = 1;
  }
  componentDidMount() {
    this.timerID = setInterval(()=>this.setName(),1000);
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  setName(){
    this.i ++;
    this.setState({name:"hy"+this.i})
  }
  render(){
    return <h1>hi,{this.state.name}</h1>
  }
}
ReactDOM.render(
  <Aiv />,
  document.getElementById('root')
); ;

1. componentDidMount方法是在ReacDOM渲染dom節(jié)點之后執(zhí)行
2. componentWillUnmount方法是在該dom節(jié)點被刪除的時候執(zhí)行

8. 正確地使用state

1). 不能直接操作state屬性

//wrong
this.state.name = "hy1";

//correct
this.setState({
  name: "hy1"
})

2). state更新可能是異步的

React為了性能，支持單次更新中可以批量執(zhí)行多個setState肚逸，所以你不能在setState中使用this.state這種方式來操作state屬性尘应。因為this.state可能是之前的屬性惶凝，還沒來得及改變。如下面的例子對比：

//假設(shè)count = 1
this.setState({
  count:this.state.count+1
})
this.setState({
  count:this.state.count+1
})
//最后count = 2

但是犬钢，setState方法可以除了接收object對象苍鲜，還可以接收function參數(shù)。傳入function完美解決異步問題??????玷犹。使用方法：setState( function( prevState混滔，[props] ）{} )。

this.setState(function(x){
  return {
    count: x.count+1
  }
})
this.setState(function(x){
  return {
    count: x.count+1
  }
})

操練以下

3). state屬性可以只更新單個屬性

this.state = {
    posts: [],
    comments: []
};

this.setState({
  posts: ['hy']
})

9. state作為參數(shù)傳遞

直接看例子：

<FormattedDate date={this.state.date} />

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

等價于下面：

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>