React学习 - 二.组件基础

三个重要概念点

• 组件 return()的返回节点必须是一个，所以有多个节点时，用一个大节点包起

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';

class Index extends React.Component{
  render(){
    return (
      <div>                                                      #用 div 包起多个节点
        <ComponentHeader />
        <h2>页面的主体内容</h2>
      </div>
    );
  }
}

• 可以给外部使用的组件要加上export default

import React from 'react';
import ReactDOM from 'react-dom';

#这个组件要供给 Index 组件使用，所以加上export default
export default class ComponentHeader extends React.Component{       
  render(){
    return (
      <header>
        <h1>这里是头部</h1>
      </header>
    );
  }
}

• 入口定义：ReactDOM.render(<Index/>, document.getElementById('example'),输出给 html 的最终入口点

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';

class Index extends React.Component{
  render(){
    return (
      <div>
        <ComponentHeader />
        <h2>页面的主体内容</h2>
      </div>
    );
  }
}

ReactDOM.render(<Index/>, document.getElementById('example'));

多组件嵌套

-组件可以以参数的形式传递

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/BodyIndex';

class Index extends React.Component{
  render(){

    var component;            #这里模拟了用户登录的情况，以判断结果选择不同的组件进行传入。
    if(用户已登录) {
      component = <ComponentLoginHeader />
    }
    else {
      component = <ComponentHeader />
    }

    return (
      <div>
        {component}
        <BodyIndex />
        <ComponentFooter />
      </div>
    );
  }
}

ReactDOM.render(<Index/>, document.getElementById('example'));

JSX内置表达式(更多去看文档)

• 使用三元表达式进行判断
  下例中的：{userName == '' ? ' 用户没有登录' : '用户名： ' + userName} 用?判断 boolean 值，用:的前后来执行判断
• 标签属性的表达式
  下例中的：<input type='button' value = {userName} disabled={boolInput}></input> ,表达式可以不用引号包裹
• 注释的写法{/* 注释 */}

import React from 'react';
import ReactDOM from 'react-dom';

export default class BodyIndex extends React.Component{
  render(){

    var userName = "emilesu";
    var boolInput = false;

    return (
      <div>
        <h2>这里是主体内容</h2>
        <p>{userName == '' ? '用户没有登录' : '用户名: ' + userName }</p>
        <p><input type='button' value = {userName} disabled={boolInput}></input></p>
        {/*
          1.这里是注释
          2.这里是注释
          3.这里是注释
          */}
      </div>
    );
  }
}

生命周期函数

生命周期函数的作用，是在组件起始过程的不同阶段内，可以通过调用生命周期函数，插入响应不同的动作。

image.png