react知識總結

用於構建用戶界面的 JavaScript 庫

JSX語法

style

let style = {
  color: 'r'+'ed',
  fontSize: '30px'
}
let jsx = <div style={style}>jsx...</div>;

className

import './index.scss';
let jsx = (
  <div className="jsx">
  jsx...
  </div>
);

變量的使用和條件判斷

let name = "Jomsou";
let flag = false;
let jsx = (
  <div>
    { flag ? <p> I am {name} </p> : <p> I am not {name}</p>} 
  </div>
);

數組循環

let names = ['jomsou', 'marry', 'james']
let jsx = (
  <div>
    { names.map((name, index)=><p key={index}>Hello, I am {name}</p>)}
  </div>
);

React組件的定義

ES5
function  Component() {
  return <h1>I am Jomsou</h1>
}
ES6
class ES6component extends React.Component{
  render(){
    return <h1>I am Jomsou</h1>
  }
}
ReactDOM.render(
  <div>
    <Component/>
    <ES6component/>
  </div>,
  document.getElementById('app')
);

state：狀態，即全部參數
setState：設置狀態變化
super：繼承父組件的this指針

class ES6component extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: 'Jomsou'
    }
  }
  render(){
    //用於異步操做
    setTimeout(() => {
      this.setState({
        name: 'Jomsou Can'
      })
    }, 2000);
    return <h1>I am {this.state.name}</h1>
  }
}
ReactDOM.render(
  <div>
    {/* <Component/> */}
    <ES6component/>
  </div>,
  document.getElementById('app')
);

props: 父組件往子組件裏傳遞東西

class ES6component extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return <h1>I am {this.props.name}</h1>
  }
}
ReactDOM.render(
  <div>
    <ES6component name="Jomsou STC"/>
  </div>,
  document.getElementById('app')
);

事件處理

方式1：

一、按鈕button點擊後，this會改變，因此須要在constructor中加this.handleClick = this.handleClick.bind(this);

handleClick(){
    this.setState({
        age: this.state.age+1
    })
}
render(){
    return (
        <div>
        <h1>I am {this.state.name}</h1>
        <p>I am {this.state.age} years</p>
        <button onClick={this.handleClick}>加一歲</button>
        </div>
    )
}

方式2：

onValChange(e){
    this.setState({
      age: e.target.value
    })
  }
  render(){
    return (
      <div>
        <h1>I am {this.state.name}</h1>
        <p>I am {this.state.age} years</p>
        <input type="text" onChange={(e)=>this.onValChange(e)} />
      </div>
    )
  }

容器式組件和單純組件

class Title extends React.Component {
  render(props){
    // return <h1>{this.props.title}</h1>
    return <h1>{this.props.children}</h1>
  }
}
class App extends React.Component {
  render(){
    return (
      <div>
      {/* 容器式組件 */}
        {/* <Title title="App Title"/> */}
        <Title>
          <span>App Span</span>
          <a href="">link</a>
        </Title>
        <hr/>
        {/* 單純組件 */}
        <Component/>
      </div>
    )
  }
}

父組件向子組件傳值

用props傳值

class Title extends React.Component {
  render(props){
    <h1>{this.props.title}</h1>
  }
}
class Father extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div}>
        <Title title="App Title"/>
      </div>
    )
  }
}

子組件向父組件傳值

經過回調函數

class Child extends React.Component {
  constructor(props){
    super(props);
  }
  handleClick(){
    this.props.onChangeColor('red');
  }
  render(){
    return (
      <div>
        <h1>父組件的背景顏色：{this.props.bgColor}</h1>
        <button onClick={(e)=>this.handleClick(e)}>改變顏色</button>
      </div>
    )
  }
}
class Title extends React.Component {
  render(props){
    return <h1>{this.props.children}</h1>
  }
}
class Father extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      bgColor: '#999'
    }
  }
  onChangeColor(color){
    this.setState({
      bgColor: color
    })
  }
  render(){
    return (
      <div style={{background: this.state.bgColor}}>
        <Child bgColor={this.state.bgColor} onChangeColor={color=>this.onChangeColor(color)}/> 
      </div>
    )
  }
}
ReactDOM.render(
  <div>
    <Father/>
  </div>,
  document.getElementById('app')
);

兄弟組件相互傳值

狀態提高——先提高到父組件上，再到兄弟組件裏

class Child1 extends React.Component {
  constructor(props){
    super(props);
  }
  handleClick(){
    this.props.changeChild2Color('red');
  }
  render(){
    return (
      <div>
        <h1>child1：{this.props.bgColor}</h1>
        <button onClick={(e)=>this.handleClick(e)}>改變顏色</button>
      </div>
    )
  }
}
class Child2 extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div style={{background: this.props.bgColor}}>
        <h1>Child2：{this.props.bgColor}</h1>
      </div>
    )
  }
}
class Title extends React.Component {
  render(props){
    return <h1>{this.props.children}</h1>
  }
}
class Father extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      bgColor: '#999'
    }
  }
  onChangeChild2Color(color){
    this.setState({
      bgColor: color
    })
  }
  render(){
    return (
      <div>
        <Child1 changeChild2Color={(color)=>this.onChangeChild2Color(color)}/> 
        <Child2 bgColor={this.state.bgColor}/> 
      </div>
    )
  }
}
ReactDOM.render(
  <div>
    <Father/>
  </div>,
  document.getElementById('app')
);

生命週期

從生到死

做用：

• Mounting: 掛載階段
• Updating：運行時階段
• Unmounting：卸載階段
• Error Handling： 錯誤處理

掛載階段

constructor
componentWillMount
render
componentDidMount

有更新的狀況

componentWillReceiveProps//若是父組件向子組件傳值，執行
shouldComponentUpdate: 默認是true，能夠更新//設置爲flase則沒有如下步驟
componentWillUpdate
render
componentDidUpdate

卸載階段

componentWillUnmount

Router原理及React-Router

歷史--棧的形式
跳轉--可傳遞數據
事件

常見的Router

• 頁面Router：從新渲染

window.location.href="https://www.baidu.com"

• Hash Router

window.loaction = '#hash';
window.onhashchange = function(){
  console.log('current hash:', window.location.hash)
}

• H5 Router

包括頁面跟hash路由

//推動一個狀態
history.pushState('name', 'title', '/path');
//替換一個狀態
history.replaceState('name', 'title', '/path');
//popstate
window.onpopstate = function(){
  console.log(window.location.href);
  console.log(windos.location.pathname);
}

HashRouter和BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Link } from 'react-router-dom';

class A extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>Component A</div>
        )
    }
}
class B extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>Component B</div>
        )
    }
}
class Wraper extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <Link to="/a">組件A</Link>
                <br/>
                <Link to="/b">組件B</Link>
                {this.props.children}
            </div>
        )
    }
}

ReactDOM.render(
    <Router>
        <Wraper>
            <Route path="/a" component={A} />
            <Route path="/b" component={B} />
        </Wraper>
    </Router>
    , document.getElementById('app'));

若是把hashRouter改爲BrowserRouter，則變成