React学习笔记

1. ReactDOM.render

ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。

ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个DOM元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。若要为创建的某个元素增加class属性，不能直接定义class而要用className，因为class是javascript中的保留字。而 tabindex 则变为 tabIndex。

 

1. React定义样式

可以定义行内样式,将所有的样式包裹在一个对象中,以类似变量的形式给style属性赋值,注意样式属性要用驼峰命名法表示，如:backgroundColor而不是background-color;fongSize而不是font-size。

 

1. ReactDOM

如果你使用一个 <script> 标签引入 React，所有的顶层 API 都能在全局 ReactDOM 上调用。如果你使用 npm 和 ES6，你可以用 import ReactDOM from 'react-dom'。如果你使用 npm 和 ES5，你可以用 var ReactDOM = require('react-dom')。

const element = <h1>Hello, world</h1>;

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

 

1. React 文件上传：

通过upload获取的base64编码的图片，可以直接传给AvatarEditor的image属性。

 

const e = React.createElement;

 

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = { liked: false };

  }

 

  render() {

    if (this.state.liked) {

      return 'You liked this.';

    }

 

    return e(

      'button',

      { onClick: () => this.setState({ liked: true }) },

      'Like'

    );

  }

}

const domContainer = document.querySelector('#upload');

ReactDOM.render(e(App), domContainer);

 

1. JSX

1. 变量声明

const element = <h1>Hello, world!</h1>;

1. JSX也是表达式

可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：

function getGreeting(user) {

  if (user) {

    return <h1>Hello, {formatName(user)}!</h1>;

  }

  return <h1>Hello, Stranger.</h1>;

}

1. JSX插入变量

可以使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <img src={user.avatarUrl}></img>;

1. JSX防止注入

JSX所有的内容在渲染之前都被转换成了字符串。

1. JSX表示对象

  Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。以下两种示例代码完全等效：

const element = (

  <h1 className="greeting">

    Hello, world!

  </h1>

);

===

const element = React.createElement(

  'h1',

  {className: 'greeting'},

  'Hello, world!'

);

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：

// 注意：这是简化过的结构

const element = {

  type: 'h1',

  props: {

    className: 'greeting',

    children: 'Hello, world!'

  }

};

 

1. 元素渲染-更新已渲染的元素

function tick() {

  const element = (

    <div>

      <h1>Hello, world!</h1>

      <h2>It is {new Date().toLocaleTimeString()}.</h2>

    </div>

  );

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

}

 

setInterval(tick, 1000);

这个计时器例子会在 setInterval() 回调函数，每秒都调用 ReactDOM.render()。

 

1. 组件 & Props

从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

（1）渲染组件：

function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}

const element = <Welcome name="Sara" />;

ReactDOM.render(

  element,

  document.getElementById('root')

);

组件名称必须以大写字母开头。React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome

（2）组合组件

创建一个可以多次渲染 Welcome 组件的 App 组件：

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')

);

（3）提取组件

提取组件以简化Comment组件：

function Avatar(props) {

  return (

    <img className="Avatar"

      src={props.user.avatarUrl}

      alt={props.user.name}

    />

  );

}

function UserInfo(props) {

  return (

    <div className="UserInfo">

      <Avatar user={props.user} />

      <div className="UserInfo-name">

        {props.user.name}

      </div>

    </div>

  );

}

function Comment(props) {

  return (

    <div className="Comment">

      <UserInfo user={props.author} />

      <div className="Comment-text">

        {props.text}

      </div>

      <div className="Comment-date">

        {formatDate(props.date)}

      </div>

    </div>

  );

}

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

 

（4）props

默认 Props

你可以通过组件类的 defaultProps 属性为 props 设置默认值，实例如下：

React 实例

class HelloMessage extends React.Component {

  render() {

    return (

      <h1>Hello, {this.props.name}</h1>

    );

  }

}

HelloMessage.defaultProps = {

  name: 'Runoob'

};

const element = <HelloMessage/>;

ReactDOM.render(

  element,

  document.getElementById('example')

);

 

1. State与生命周期

应用程序的 UI 是动态的，并会伴随着时间的推移而变化。state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

（1）向class组件中添加局部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')

);

（2）挂载与卸载（构造与析构），将生命周期方法添加到 Class 中

class Clock extends React.Component {

   constructor(props) {

    super(props);

    this.state = {date: new Date()};

  }

 

  componentDidMount() {

    this.timerID = setInterval(

      () => this.tick(),

      1000

    );

  }

 

  componentWillUnmount() {

    clearInterval(this.timerID);

  }

 

  tick() {

    this.setState({

      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')

);

 

（3）正确使用state

（a）不要直接修改state

此代码不会重新渲染组件：this.state.comment = 'Hello';

应该使用setState（）：this.setState({comment: 'Hello'});

构造函数是唯一可以给this.state赋值的地方。

（2）state的更新可能是异步的

因为 this.props 和 this.state 可能会异步更新，所以不要依赖他们的值来更新下一个状态。例如，此代码可能会无法更新计数器：

this.setState({

  counter: this.state.counter + this.props.increment,

});

可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

this.setState((state, props) => ({

  counter: state.counter + props.increment

}));

上面使用了箭头函数，不过使用普通的函数也同样可以：

this.setState(function(state, props) {

  return {

    counter: state.counter + props.increment

  };

});

（3）state的更新会被合并

当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。

1. 数据是向下（单向）的

    不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是 class 组件。

这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件，其他组件都无法访问。

组件可以选择把它的 state 作为 props 向下传递到它的子组件中：

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

    这通常会被叫做“自上而下”或是“单向”的数据流。任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。

如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。

 

1. 事件处理

（1）React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:

React 事件的命名采用小驼峰式（camelCase），而不是纯小写；

使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

传统的 HTML：

<button οnclick="activateLasers()">

  Activate Lasers

</button>

在 React 中略微不同：

<button onClick={activateLasers}>

  Activate Lasers

</button>

（2）在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：

<a href="#" οnclick="console.log('The link was clicked.'); return false">

  Click me

</a>

在 React 中，可能是这样的：

function ActionLink() {

  function handleClick(e) {

    e.preventDefault();

    console.log('The link was clicked.');

  }

 

  return (

    <a href="#" onClick={handleClick}>

      Click me

    </a>

  );

}

 

使用 React 时，你一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。事实上，你只需要在该元素初始渲染的时候添加监听器即可。

 

（3）为了在回调中使用this，绑定必不可少：

class Toggle extends React.Component {

  constructor(props) {

    super(props);

    this.state = {isToggleOn: true};

 

    // 为了在回调中使用 `this`，这个绑定是必不可少的

    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')

);

必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。

    如果你没有使用 class fields 语法，你可以在回调中使用箭头函数：

class LoggingButton extends React.Component {

  handleClick() {

    console.log('this is:', this);

  }

 

  render() {

    // 此语法确保 `handleClick` 内的 `this` 已被绑定。

    return (

      <button onClick={(e) => this.handleClick(e)}>

        Click me

      </button>

    );

  }

}

（4）向事件处理程序传递参数

在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

 

1. 条件渲染

    React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

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;

 

    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')

);

 

与运算符 &&，可以很方便地进行元素的条件渲染: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')

);

之所以能这样做，是因为在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

    在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。

1. 列表 & Key

（1）渲染多个组件

可以通过使用 {} 在 JSX 内构建一个元素集合。

使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签，最后我们将得到的数组赋值给 listItems：

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>

  <li>{number}</li>

);

我们把整个 listItems 插入到 <ul> 元素中，然后渲染进 DOM：

ReactDOM.render(

  <ul>{listItems}</ul>,

  document.getElementById('root')

);

 

（2）给每个列表元素分配一个key属性：

function NumberList(props) {

  const numbers = props.numbers;

  const listItems = numbers.map((number) =>

    <li key={number.toString()}>

      {number}

    </li>

  );

  return (

    <ul>{listItems}</ul>

  );

}

 

const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(

  <NumberList numbers={numbers} />,

  document.getElementById('root')

);

 

（3）用其他属性名显式传递key

key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值：

const content = posts.map((post) =>

  <Post

    key={post.id}

    id={post.id}

    title={post.title} />

)

 

1. 表单

1. select标签：

由于 selected 属性的缘故，椰子选项默认被选中。React 并不会使用 selected 属性，而是在根 select 标签上使用 value 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。例如：

 

class FlavorForm extends React.Component {

  constructor(props) {

    super(props);

    this.state = {value: 'coconut'};

 

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

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

  }

 

  handleChange(event) {

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

  }

 

  handleSubmit(event) {

    alert('你喜欢的风味是: ' + this.state.value);

    event.preventDefault();

  }

 

  render() {

    return (

      <form onSubmit={this.handleSubmit}>

        <label>

          选择你喜欢的风味:

          <select value={this.state.value} onChange={this.handleChange}>

            <option value="grapefruit">葡萄柚</option>

            <option value="lime">酸橙</option>

            <option value="coconut">椰子</option>

            <option value="mango">芒果</option>

          </select>

        </label>

        <input type="submit" value="提交" />

      </form>

    );

  }

}

 

 

1. 处理多个输入

当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。

例如：

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>

          参与:

          <input

            name="isGoing"

            type="checkbox"

            checked={this.state.isGoing}

            onChange={this.handleInputChange} />

        </label>

        <br />

        <label>

          来宾人数:

          <input

            name="numberOfGuests"

            type="number"

            value={this.state.numberOfGuests}

            onChange={this.handleInputChange} />

        </label>

      </form>

    );

  }

}

 

1. 组合

特例关系

有些时候，我们会把一些组件看作是其他组件的特殊实例，比如 WelcomeDialog 可以说是 Dialog 的特殊实例。

在 React 中，我们也可以通过组合来实现这一点。“特殊”组件可以通过 props 定制并渲染“一般”组件：

function Dialog(props) {

  return (

    <FancyBorder color="blue">

      <h1 className="Dialog-title">

        {props.title}

      </h1>

      <p className="Dialog-message">

        {props.message}

      </p>

    </FancyBorder>

  );

}

 

function WelcomeDialog() {

  return (

    <Dialog

      title="Welcome"

      message="Thank you for visiting our spacecraft!" />

 

  );

}

 

组合也同样适用于以 class 形式定义的组件。

function Dialog(props) {

  return (

    <FancyBorder color="blue">

      <h1 className="Dialog-title">

        {props.title}

      </h1>

      <p className="Dialog-message">

        {props.message}

      </p>

      {props.children}

    </FancyBorder>

  );

}

 

class SignUpDialog extends React.Component {

  constructor(props) {

    super(props);

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

    this.handleSignUp = this.handleSignUp.bind(this);

    this.state = {login: ''};

  }

 

  render() {

    return (

      <Dialog title="Mars Exploration Program"

              message="How should we refer to you?">

        <input value={this.state.login}

               onChange={this.handleChange} />

 

        <button onClick={this.handleSignUp}>

          Sign Me Up!

        </button>

      </Dialog>

    );

  }

 

  handleChange(e) {

    this.setState({login: e.target.value});

  }

 

  handleSignUp() {

    alert(`Welcome aboard, ${this.state.login}!`);

  }

}

 

1. 状态提升

通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。