react入门教程03 - React 基础

本系列在《The Road to learn React》指导下，记录如何写出 Hacker News (译者注:一个著名黑客论坛)应用，以及更多相关知识的梳理，能够更好的教会你 React。

知识回顾

在react入门教程01中，介绍了React的简介，并搭建了开发环境、最后创建了第一个React应用；在react入门教程02中，简单地介绍JSX和ES6，同时实现了列表展示，最后接触调试神器 - 模块热替换方式。

本章将指导你了解 React 的基础知识，并创建自己的组件。

组件内部状态

组件内部状态也被称为局部状态，允许你保存、修改和删除存储在组件内部的属性。使用 ES6 类组件可以在构造函数中初始化组件的状态。构造函数只会在组件初始化时调用一次。

下面，构造函数方式实现组件的初始状态，初始状态为一个列表。并将render()方法中的静态列表改成使用state里的list。


...

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      list: list,
    };
  }

  render() {
    return (
      <div className="App">
        {this.state.list.map(item => {
          return (
            <div key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>
            </div>
          );
        })}
      </div>
    );
  }
}

...

现在list是组件的一部分，它在组件内部状态(state)中。你可以从list中添加、修改或者删除列表项。每次修改组件的内部状态，组件的render()方法会再次运行。这样，可以简单地实现数据修改后，组件重新渲染并展示正确的数据。

关于上述的构造函数，更多的介绍下:

constructor方法是一个特殊的方法，其用于创建和初始化使用class创建的一个对象。一个类只能拥有一个名为 “constructor”的特殊方法。如果类包含多个constructor的方法，则将抛出一个SyntaxError 。
一个构造函数可以使用 super 关键字来调用一个父类的构造函数。

单向数据流

使用React的单向数据流，来实现Dismiss按钮将从列表中删除数据项:

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      list: list,
    };

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

  onDismiss(id) {
    const updatedList = this.state.list.filter(item => item.objectID !== id);
    this.setState({ list: updatedList });
  }

  render() {
    return (
      <div className="App">
        {this.state.list.map(item => {
          return (
            <div key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>
              <span>
                <button type='button'
                  onClick={()=> this.onDismiss(item.objectID)}>
                  Dismiss  
                </button>
              </span>
            </div>
          );
        })}
      </div>
    );
  }
}

单向数据流方式的内部状态更新:

15343265191351.jpg

这里，我们为列表中的每一项增加一个按钮。通过该按钮可以删除你不感兴趣的数据项。

几个知识点:

onDismiss() 是类方法，需要在构造函数中绑定它。
state更新，会再次运行render()方法渲染，最后这个删除项就不再显示了。

深入理解 React的状态与生命周期

原文

这里以一个时钟为例，下面是以手动调用ReactDOM.render()来重新渲染的方式实现:

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

在codepen的实现案例

下面，我们将实现可复用的Clock组件，该组件自维护地实现更新和渲染。

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

在codepen的实现案例

以上就是这个Clock组件的实现。从手动渲染方式转换到组件方式的三步骤如下:

第一步，将Function转换到ES6 Class。先实现继承React.Component的同名类，新增render()方法，将function的方法内容移至render()方法，使用this.props替换props，最后删除空的function定义。

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

在codepen的实现案例

第二步，使用内部状态。在render()方法中用this.state.date替换this.props.date，使用构造函数初始化状态this.state，注意需将props传给父级构造函数，现在渲染<Clock />不用再传入date参数了。

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

在codepen的实现案例

第三步，给组件增加生命周期类的方法，我们在第一次渲染组件的时候开启定时器，在组件被移除的时候删除定时器，这里使用componentDidMount和componentWillUnmount，这类方法又叫做生命周期钩子。componentDidMount在组件被渲染到DOM的时候运行，这里适合开启定时器:

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

在componentWillUnmount()方法中下架定时器:

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

最后定义tick()方法来更新状态中的date数据:

  tick() {
    this.setState({
      date: new Date()
    });
  }

现在，一个时钟组件就实现好了。

使用状态state的三点注意事项:

不能直接修改state，必须通过setState()方法

// Wrong
this.state.comment = 'Hello';

// Correct
this.setState({comment: 'Hello'});

状态更新是一个异步操作，React会因为性能问题，选择批量执行setState()调用。所以不能依赖当前状态的数据来计算下一个状态数据。

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

setState()是一个Merge操作，不会更新或覆盖其他不相干的属性

JavaScript类的绑定

在Dismiss按钮的实现中，你已经在构造函数中绑定了onDismiss方法，这一步是为了做什么？JavaScript类的绑定是非常重要的，因为类方法不会自动绑定this到实例上。让我们通过代码来验证。

class ExplainBindingsComponent extends React.Component { 
  
  onClickMe() {
    console.log(this.state); 
  }
  
  render() { 
    return (
      <button onClick={this.onClickMe} type="button">Click Me</button> 
    );
  } 
}
  
ReactDOM.render(
  <ExplainBindingsComponent />,
  document.getElementById('root')
);

在codepen的实现案例

按钮正确的渲染了，但是当你点击按钮的时候，在开发调试控制台中得到undefined。由于this是undefined所以并不能被检索到，所有为了确保this在类方法中可访问的，需要将this绑定到类方法上。

在构造行数中正确绑定:

class ExplainBindingsComponent extends React.Component { 
  
  constructor() {
    super();
    this.state = {};
    this.onClickMe = this.onClickMe.bind(this);
  }
  
  onClickMe() {
    console.log(this.state); 
  }
  
  render() { 
    return (
      <button onClick={this.onClickMe} type="button">Click Me</button> 
    );
  } 
}
  
ReactDOM.render(
  <ExplainBindingsComponent />,
  document.getElementById('root')
);

再次尝试点击按钮，这个this对象就指向了类的实例。

最后值得一提的是类方法可以通过ES6的箭头函数做到自动地绑定。

class ExplainBindingsComponent extends React.Component { 
  
  constructor() {
    super();
    this.state = {};
  }
  
  onClickMe = () => {
    console.log(this.state); 
  }
  
  render() { 
    return (
      <button onClick={this.onClickMe} type="button">Click Me</button> 
    );
  } 
}
  
ReactDOM.render(
  <ExplainBindingsComponent />,
  document.getElementById('root')
);

如果在构造函数中的重复绑定对你有所困扰，你可以使用这种方式代替。React 的官方文档中坚持在构造函数中绑定类方法，所以本书也会采用同样的方式。

和表单交互

让我们在程序中加入表单来体验 React 和表单事件的交互，我们将在程序中加入搜索功能，列表会根据输入框的内容对标题进行过滤。

这里直接给出最终代码实现:


...

// ES 5
// function isSearched(searchTerm) {
//   return function(item) {
//     return item.title.toLowerCase().includes(searchTerm.toLowerCase());
//   }
// }

// ES 6
const isSearched = searchTerm => item => 
  item.title.toLowerCase().includes(searchTerm.toLowerCase());

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: list,
      searchTerm: '',
    };

    this.onDismiss = this.onDismiss.bind(this);
    this.onSearchChange = this.onSearchChange.bind(this);
  }

  onDismiss(id) {
    const updatedList = this.state.list.filter(item => item.objectID !== id);
    this.setState({ list: updatedList });
  }

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

  render() {
    return (
      <div className="App">
        <form>
          <input type="text" onChange={this.onSearchChange} />
        </form>
        {this.state.list.filter(isSearched(this.state.searchTerm)).map(item => {
          return (
            <div key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>
              <span>
                <button
                  type="button"
                  onClick={() => this.onDismiss(item.objectID)}
                >
                  Dismiss
                </button>
              </span>
            </div>
          );
        })}
      </div>
    );
  }
}

...

这里，首先在本地内部状态中记录了搜索词searchTerm，并在输入框中定义了一个onChange处理程序，来更新本地的搜索词的状态。过滤器的功能使用到了isSearched的高阶函数，该函数返回了另一个函数，因为filter函数接受一个函数作为它的输入，返回的函数可以访问列表项目对象，将会根据函数定义的条件对列表进行过滤。

更多高阶函数相关内容中文/English

ES6小知识补充

对象初始化

在 ES6 中，你可以通过简写属性更加简洁地初始化对象。想象下面的对象初始化:

var o = {};
var o = {a: 'foo', b: 42, c: {}};

var a = 'foo', b = 42, c = {};
var o = {a: a, b: b, c: c};

var o = {
  property: function ([parameters]) {},
  get property() {},
  set property(value) {}
};

对象初始化是一个描述对象初始化过程的表达式。对象初始化是由一组描述对象的属性组成。
属性的值可以是原始类型，也可以是其他对象。

没有属性的空对象可以用以下方式创建：

let obj = {};

不过，字面和初始化标记的优势在于，可以用内含属性的花括号快速创建对象。简单地编写一个逗号分隔的键值对的类别。如下代码创建了一个含三个属性的对象，键分别为 "foo", "age" 和 "baz"。这些键对应的值，分别是字符串“bar”，数字42和另一个对象。

let obj = {
  foo: "bar",
  age: 42,
  baz: { myProp: 12 },
}

创建对象后，可以读取或者修改它。对象属性可以用下标小圆点标记或者方括号标记访问。

object.foo; // "bar"
object["age"]; // 42

object.foo = "baz";

对象属性也可以是一个函数

// ES5
var userService = { 
    getUserName: function (user) {
            return user.firstname + ' ' + user.lastname; 
        },
};


// ES6
const userService = { 
    getUserName(user) {
        return user.firstname + ' ' + user.lastname; 
    },
};

最后值得一提的是你可以在 ES6 中使用计算属性名。

// Computed property names (ES6)
var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

var param = 'size';
var config = {
  [param]: 12,
  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};

console.log(config); // { size: 12, mobileSize: 4 }

更多ES6 对象初始化相关内容阅读

ES6 解构

在 JavaScript ES6 中有一种更方便的方法来访问对象和数组的属性，叫做解构。比较下面 JavaScript ES5 和 ES6 的代码片段。

const user = { 
    firstname: 'Robin', lastname: 'Wieruch',
};

// ES5
var firstname = user.firstname; 
var lastname = user.lastname;
console.log(firstname + ' ' + lastname); // output: Robin Wieruch

// ES6
const { firstname, lastname } = user; 
console.log(firstname + ' ' + lastname);
// output: Robin Wieruch

使用解构方式简化 map和filter部分的代码:


...

  render() {
    const { searchTerm, list } = this.state;
    return (
      <div className="App">
        <form>
          <input type="text" onChange={this.onSearchChange} />
        </form>
        {list.filter(isSearched(searchTerm)).map(item => {
          return (
          
...

组件拆分

现在，你有一个大型的 App 组件。它在不停地扩展，最可能会变得混乱。你可以开始将它拆分成若干个更小的组件。

让我们开始使用一个用于搜索的输入组件和一个用于展示的列表组件。

第一个是 Search 组件。

class Search extends Component {
  render() {
    const { value, onChange } = this.props;
    return (
      <form>
        <input type="text" value={value} onChange={onChange} />
      </form>
    );
  }
}

第二个是 Table 组件。

class Table extends Component {
  render() {
    const {list, pattern, onDismiss } = this.props;
    return (
      <div>
        {list.filter(isSearched(pattern)).map(item => {
          <div key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>{item.num_comments}</span>
            <span>{item.points}</span>
            <span>
              <button
                type="button"
                onClick={() => onDismiss(item.objectID)}
              >
                Dismiss
                </button>
            </span>
          </div>
        })}
      </div>
    )
  }
}

让我们开始使用上述的搜索输入组件和用于展示的列表组件。


...

  render() {
    const { searchTerm, list } = this.state;
    return (
      <div className="App">
        <Search value={searchTerm} onChange={this.onSearchChange} />
        <Table list={list} pattern={searchTerm} onDismiss={this.onDismiss} />
      </div>
    );
  }
}

现在你有了三个 ES6 类组件。你可能已经注意到，props 对象可以通过这个类实例的 this 来访问。props 是 properties 的简写，当你在 App 组件里面使用它时，它有你传递给这些组件的所有值。这样，组件可以沿着组件树向下传递属性。

从 App 组件中提取这些组件之后，你就可以在别的地方去重用它们了。因为组件是通过 props 对象来获取它们的值，所以当你在别的地方重用它时，你可以每一次都传递不同的 props，这些组件就变得可复用了。

可组合的组件

在 props 对象中还有一个小小的属性可供使用: children 属性。通过它你可以将元素从上层传递到你的组件中，这些元素对你的组件来说是未知的，但是却为组件相互组合提供了可能性。让我们来看一看，当你只将一个文本(字符串)作为子元素传递到 Search 组件中会怎样。

  render() {
    const { searchTerm, list } = this.state;
    return (
      <div className="App">
        <Search value={searchTerm} onChange={this.onSearchChange} >
          Search
        </Search>

现在 Search 组件可以从 props 对象中解构出 children 属性。然后它就可以指定这个 children 应该显示在哪里。

class Search extends Component {
  render() {
    const { value, onChange, children } = this.props;
    return <form>
        {children}
        <input type="text" value={value} onChange={onChange} />
      </form>;
  }
}

现在，你应该可以在输入框旁边看到这个 “Search” 文本了。当你在别的地方使用 Search 组件时，如果你喜欢，你可以选择一个不同的文本。总之，它不仅可以把文本作为子元素传递，还可以将一个元素或者元素树(它还可以再次封装成组件)作为子元素传递。children 属性让组件相互组合到一起成为可能。

可复用组件-Button

可复用和可组合组件让你能够思考合理的组件分层，它们是 React 视图层的基础。前面几章提到了可重用性的术语。现在你可以复用 Search 和 Table 组件了。甚至 App 组件都是可复用的了，因为你可以在别的地方重新实例化它。

让我们再来定义一个可复用组件 Button，最会被更频繁地复用。

class Button extends Component {
  render() {
    const { onClick, className='', children } = this.props;
    return (
      <button type="button" className={className} onClick={onClick}>
        {children}
      </button>
    )
  }
}

替换Table组件中的button元素:

class Table extends Component {
  render() {
    const { list, pattern, onDismiss } = this.props;
    return (
      <div>
        {list.filter(isSearched(pattern)).map(item => (
          <div key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>{item.num_comments}</span>
            <span>{item.points}</span>
            <span>
              <Button onClick={() => onDismiss(item.objectID)}>Dismiss</Button>
            </span>
          </div>
        ))}
      </div>
    );
  }
}

函数式无状态组件

函数式无状态组件: 这类组件就是函数，它们接收一个输入并返回一个输出。输入是 props，输出就是一个普通的 JSX 组件实例。到这里，它和 ES6 类组件非常的相似。然而，函数式无状态组件是函数(函数式的)，并且它们没有本地状态(无状态的)。你不能通过 this.state 或者 this.setState() 来访问或者更新状态，因为这里没有 this 对象。此外，它也没有生命周期方法。虽然你还没有学过生命周期方法，但是你已经用到了其中两个:constructor() and render()。constructor 在一个组件的生命周期中只执行一次，而 render() 方法会在最开始执行一次，并且每次组件更新时都会执行。当你阅读到后面关于生命周期方法的章节时，要记得函数式无状态组件是没有生命周期方法的。

什么时候更适合使用函数式无状态组件而非 ES6 类组件?一个经验法则就是当你不需要本地状态或者组件生命周期方法时，你就应该使用函数式无状态组件。

把 Search 组件重构成一个函数式无状态组件：

const Search = ({ value, onChange, children }) => {

  // do something

  return (
    <form>
      {children}
      <input type="text" value={value} onChange={onChange} />
    </form>
  );
};

给组件声明样式

整个应用声明样式 -- src/index.js 文件:

body {
  color: #222;
  background: #f4f4f4;
  font: 400 14px CoreSans, Arial, sans-serif;
}
a {
  color: #222;
}
a:hover {
  text-decoration: underline;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
input {
  padding: 10px;
  border-radius: 5px;
  outline: none;
  margin-right: 10px;
  border: 1px solid #dddddd;
}
button {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #dddddd;
  background: transparent;
  color: #808080;
  cursor: pointer;
}
button:hover {
  color: #222;
}
*:focus {
  outline: none;
}

src/App.css - App 文件中给你的组件声明样式

.page {
  margin: 20px;
}
.interactions {
  text-align: center;
}
.table {
  margin: 20px 0;
}
.table-header {
  display: flex;
  line-height: 24px;
  font-size: 16px;
  padding: 0 10px;
  justify-content: space-between;
}
.table-empty {
  margin: 200px;
  text-align: center;
  font-size: 16px;
}

.table-row {
  display: flex;
  line-height: 24px;
  white-space: nowrap;
  margin: 10px 0;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
}
.table-header > span {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}
.table-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}
.button-inline {
  border-width: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
  -webkit-font-smoothing: inherit;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
}
.button-active {
  border-radius: 0;
  border-bottom: 1px solid #38bb6c;
}

现在可以在一些组件中使用这些样式。

APP:


...

  render() {
    const { searchTerm, list } = this.state;
    return (
      <div className="page">
        <div className="interactions">
          <Search value={searchTerm} onChange={this.onSearchChange}>
            Search
          </Search>
        </div>
        <Table list={list} pattern={searchTerm} onDismiss={this.onDismiss} />
      </div>
    );
  }
}

Table组件:

class Table extends Component {
  render() {
    const { list, pattern, onDismiss } = this.props;
    return (
      <div className="table">
        {list.filter(isSearched(pattern)).map(item => (
          <div key={item.objectID} className="table-row">
            <span style={{ width: "40%" }}>
              <a href={item.url}>{item.title}</a>
            </span>
            <span style={{ width: "30%" }}>{item.author}</span>
            <span style={{ width: "10%" }}>{item.num_comments}</span>
            <span>{item.points}</span>
            <span style={{ width: "10%" }}>
              <Button
                onClick={() => onDismiss(item.objectID)}
                className="button-inline"
              >
                Dismiss
              </Button>
            </span>
          </div>
        ))}
      </div>
    );
  }
}

小结

你已经学习了编写一个 React 应用所需要的基础知识了!

React

使用this.state和setState()来管理你的内部组件状态
将函数或者类方法传递到你的元素处理器
在 React 中使用表单或者事件来添加交互
在 React 中单向数据流是一个非常重要的概念
拥抱 controlled components
通过 children 和可复用组件来组合组件
ES6类组件和函数式无状态组件的使用方法和实现
给你的组件声明样式的方法

ES6

绑定到一个类的函数叫作类方法
对象初始化
解构对象和数组
默认参数

你可以进一步阅读官方文档。

你还可以在这里找到源码。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,558评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,002评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,036评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,024评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,144评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,255评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,295评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,068评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,478评论 1赞 305
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,789评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,965评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,649评论 4赞 336
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,267评论 3赞 318
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,982评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,223评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,800评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,847评论 2赞 351

react入门教程03 - React 基础

组件内部状态

单向数据流

深入理解 React的状态与生命周期

JavaScript类的绑定

和表单交互

ES6小知识补充

对象初始化

ES6 解构

组件拆分

可组合的组件

可复用组件-Button

函数式无状态组件

给组件声明样式

小结

React

ES6

推荐阅读更多精彩内容