以下资料都来自于 https://facebook.github.io/react/docs

快速上手

本文源码

代码预览调试平台

1
codepen

codepen.io

JSX

在js中直接写html对象
html代码的顶层必须是开闭封口的
{formatName(xxx)}的方式实现模板功能

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

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

js手写输出dom

直接用api输出 1 React.createElement
之后的讨论都是基于jsx api的方式不多做讨论

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

const element = React.createElement(
    'h1', 
    {
        className : 'greeting'
    },
    'Hello, world! - createElement'
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

组件

创建1 class的方式从1 Component继承
引入后可jsx调用1 <Welcome name="Sara" />

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


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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
const element = <App />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

state

这是有状态的组件
在载入组件后创建定时器，将要销毁组件前删除定时器，养成这个习惯
修改state要用 1 setState 方法
1 this表示组件本身
每次 1 state 的改变都会调用 1 render 来重绘组件
在 1 setState 的同时读取状态，需要通过对象 1 prevState 来读取

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


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

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

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {

    this.setState((prevState, props) => ({
        date: new Date(),
        count: prevState.count + 1
      }));

    // this.setState({
    //   date: new Date(),
    //   count: 
    // });
  }

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


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

event事件

构造时绑定 1 constructor , 1 bind(this)
元素代入 1 onClick={(e) => this.handleClick2(e)}

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


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

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

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

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

  render() {
    return (
        <div>
            <button onClick={this.handleClick}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
            <button onClick={(e) => this.handleClick2(e)}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        </div>
    );
  }
}

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

条件render

元素属性 1 props 的方式传入参数
1 render 的时候根据属性值条件渲染

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

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

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

1
render &&

操作符

1 && 只有满足左边的才会执行右边

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

1
 isLoggedIn ? a : b ; render

三目运算符

1 isLoggedIn ? 'currently' : 'not'

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

用 1 ( xxx ) 方式包含jsx

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

list 和 key

如果是呈现一个 1 list 的组件，列表中的元素必须有 1 key
1 key 必须是在当前列表中唯一的

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

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number,index) => 
    <li key={index} >
      {number}
    </li>
    );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers}/>, document.getElementById('root'));

在jsx中使用

1
map()

函数方法

外嵌

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

内嵌

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

表单

输入框提交按钮组合应用

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

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value.toUpperCase()});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

1 textarea 控件用 1 value 属性插入数据

<textarea value={this.state.value} />

1 select 控件

<select value={this.state.value} >
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

处理

1
form input state

多输入

1 [xxx] 的方式动态设置 1 key 名称

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


class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

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

react - 第二节:快速上手

快速上手

本文源码

代码预览调试平台 `1 codepen`

JSX

js手写输出dom

组件

state

event事件

条件render

`1 render &&` 操作符

`1 isLoggedIn ? a : b ; render` 三目运算符

list 和 key

在jsx中使用 `1 map()` 函数方法

表单

处理 `1 form input state` 多输入

快速上手

本文源码

代码预览调试平台 1 codepen

JSX

js手写输出dom

组件

state

event事件

条件render

1 render && 操作符

1 isLoggedIn ? a : b ; render 三目运算符

list 和 key

在jsx中使用 1 map() 函数方法

表单

处理 1 form input state 多输入

代码预览调试平台 `1 codepen`

`1 render &&` 操作符

`1 isLoggedIn ? a : b ; render` 三目运算符

在jsx中使用 `1 map()` 函数方法

处理 `1 form input state` 多输入