react-record

flower_emma發表於2018-09-05

1、react官網API學習

ReactDOM.render(
  <h1>hello,word</h1>,
  document.getElementById('root')
  
)
複製程式碼

1.1 jsx 代表性的物件

下面是兩個例子是相同的意思

const element = (
  <h1 className = "greeting">
    hello,world!
  </h1>
)
複製程式碼

const element = React.createElement(
 'h1',
 {className:'greeting'},
 'Hello,word!'
)
//React.createElement 是執行一些檢查版主寫無bug的程式碼，它實際上是建立了物件類似下面這種情況：
const element = {
    type:'h1',
    prop:{
        className: 'greeting',
        children:'Hello,world!'
    }
}
上面的這些物件就稱為 “React elements”
複製程式碼

1.2 Updating the Rendered Element

React elements 是不可改變的 immutable，一旦建立，就不能更改它的children 或者屬性

1.3 Functional and Class Components

定義元件的最簡單方法是編寫JavaScript函式：

function Welcome (props){
    return <h1>hello, {props.name}</h1>
}
複製程式碼

ES6 class 形式：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

//注意：始終使用大寫字母命名元件名稱。
複製程式碼

tip：函式轉換成class形式

1、使用class ， extends React.Component
2、新增render() 方法，並把body部分移入render（）函式中
3、用this.props代替原來的props

1.4 props 只讀

1.5 state 元件內的私有

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);
複製程式碼

通過 this.setState() 更新state

//錯誤形式
this.state.comment = 'Hello'

//正確形式
this.setSate({comment: 'Hello'})

//正確形式
this.setState((state, props) => ({
  counter: state.counter + props.increment
}))
複製程式碼

備註：react是單向資料流

1.6事件 Handling Events

react 裡面事件都使用駝峰式

// HTML中
<button onclick="activateLasers()">
  Activate Lasers
</button>

//react中
<button onClick={activateLasers}>
  Activate Lasers
</button>
複製程式碼

注意在ES6 class中 bind（this）如果不想用bind 可以有兩種解決辦法請看react官網

在react裡在建立DOM元素之後新增監聽器addEventListener 來新增監聽器。相反只需要在元素建立的同時新增監聽器

class Toggle extents React.Component{
    constructior(props){
        super(props);
        this.state = {
            isToggleOn:true
        }
        //注意此處 需要繫結this  如果此處不想這樣寫 可以在繫結事件的DOM裡面使用箭頭函式
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        this.setState(
        state => ({
            isTOggleOn: !state.isToggleOn
        }))
    }
    render () {
        return (
        <button onCLick={this.handleClick}>
        {this.state.isToggleOn? 'ON':'OFF'}
        <button>)
    }
}
ReactDom.render(
 <Toggle/>,
 document.getElementByID('root')
)

// <button onClick = {(e) => this.handleClick(e)}>
複製程式碼

1.7 條件渲染 conditional rendering

1.8 列表跟keys Lists and Keys

使用map

const numbers = [1,2,3,4,5];
const listItems = numbers.map((number) => <li>{number}</li>)
複製程式碼