React学习

参考:https://doc.react-china.org/tutorial/tutorial.html

React是什么

React的核心概念有2点:

(1) 声明式渲染,(我理解就是,不需要直接操作dom)

例子:

点击一个按钮, 改变颜色.

命令式:

const container = document.getElementById(‘container’);
const btn = document.createElement(‘button’);
btn.className = ‘btn red’;
btn.onclick = function(event) {
 if (this.classList.contains(‘red’)) {
   this.classList.remove(‘red’);
   this.classList.add(‘blue’);
 } else {
   this.classList.remove(‘blue’);
   this.classList.add(‘red’);
 }
};
container.appendChild(btn);

声明式:

class Button extends React.Component{
  this.state = { color: 'red' }
  handleChange = () => {
    const color = this.state.color === 'red' ? 'blue' : 'red';
    this.setState({ color });
  }
  render() {
    return (<div>
      <button 
         className=`btn ${this.state.color}`
         onClick={this.handleChange}>
      </button>
    </div>);
  }
}

react没有去修改dom, 只是声明了页面应该是什么样子(根据不同的state), 不关心react的怎么把数据渲染到视图.

(2)基于组件

React当中包含了一些不同的组件，我们从使用React.Component开始：

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// 通过这种标签语法来使用我们上面声明的组件: <ShoppingList name="Mark" />

这样我们就拿到了一个很有趣的像XML/HTML的标签。你的组件向React描述了你想要渲染的内容。之后React会根据你开发应用数据的变化自动渲染和更新组件。

一个组件会接受名为props的参数，并通过名为render的方法返回一个嵌套结构的视图。

render返回的是你对你想要渲染内容的描述。React会根据你的描述将对应内容在屏幕上渲染出来。讲的更具体一点，render返回的是一个React元素，是一种对渲染内容比较简洁的描述。大部分React开发者都会使用一种名为JSX的语法扩展来更方便的书写这种描述。上面的那个例子就等同于：

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

在JSX中你可以任意使用JavaScript表达式，只需要用一个大括号把表达式括起来。每一个React元素事实上都是一个JavaScript对象，你可以在你的应用中把它保存在变量中或者作为参数传递。