react學習(一)

元件和屬性（props）

函數式元件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}      

渲染一個元件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
} //元件

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
); //渲染      

注意：元件名總是大寫字母開始，比如 Welcome。

元件名字可以直接用作html标簽，比如<Welcome />

ReactDom.render()

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
); //第一個是App元件，傳回的是html标簽。第二個是react根節點。      

注意：

元件必須傳回一個單獨的根元素。這就是為什麼我們添加一個 

<div>

 來包含所有 

<Welcome />

 元素的原因。

第二個render例子：

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);      

狀态(state)和生命周期

上面介紹的元件，是函數式元件，而這種元件有限制，無法使用state，是以，第二種元件——類元件，則變得額外重要。

函數式元件轉化為類元件：

1. 建立一個繼承自 

   React.Component

    類的 ES6 class 同名類。
2. 添加一個名為 

   render()

    的空方法。
3. 把原函數中的所有内容移至 

   render()

    中。
4. 在 

   render()

    方法中使用 

   this.props

    替代 

   props

   。
5. 删除保留的空函數聲明。

class Clock extends React.Component {  //Clock 大寫開頭，也就是函數式元件的名字
  render() {    //多了一個render()空方法
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}      

注意： 現在這個Clock就是類元件了，而不是函數式元件，此時才可以使用狀态（state）。

class Clock extends React.Component {
  constructor(props) {
    super(props);  //将props傳遞給constructor構造函數，
    this.state = {date: new Date()}; // 使用constructor函數初始化this.state
  }   // 類元件應始終使用 props 調用基礎構造函數。

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

ReactDOM.render(  //渲染
  <Clock />,
  document.getElementById('root')
);      

生命周期鈎子：

class Clock extends React.Component {  //Clock 類元件
  constructor(props) {  //基礎構造函數，用來初始化this.state
    super(props);     //傳入props
    this.state = {date: new Date()};  //初始化
  }

  componentDidMount() {   // 挂載
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {  //解除安裝
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({     //更新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')
);      

事件：

• React 事件使用駝峰命名，而不是全部小寫。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 這個綁定是必要的，使`this`在回調中起作用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>    //onClick 使用駝峰命名法
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);      

條件渲染：

參考文檔:     http://www.css88.com/react/docs/conditional-rendering.html

傳回null則渲染。

轉載于:https://www.cnblogs.com/yadiblogs/p/9172973.html