React 5大核心概念......

1:1、组件 2、JSX 3、Props & State 4、组件API 5、组件类型

概念一：React组件的作用

React组件能够像原生的HTML标签一样输出特定的界面元素，并且也能包括一些元素相关逻辑功能的代码。

现在我们一般会用ES6的Class语法来声明一个React组件，它包含一个能够返回HTML的render方法。

class MyComponent extends React.Component {
  render() {
    return <p>Hello World!<p>;
  }
}

概念二：JSX是什么?

是的你没看错，按照上面React组件的示例代码，React的意思就是让我们把HTML和JS代码全都写在一起。React是通过一种叫做JSX的语法扩展（X代表XML）来实现的。

JSX乍看起来可能很奇怪，不过你慢慢会习惯的。

是的我知道，按照我们以往的传统，应该尽量把HTML和JavaScript的代码分开才是。不过看样子现在忘记这教条才是提高你前端开发效率的正道。

我们还是来举几个JSX实际应用的例子吧!

class MyComponent extends React.Component {
  render() {
    return <p>Today is: {new Date()}</p>;
  }
}

你不再需要什么前端模板标签之类的东西了，你可以直接在JSX中使用三元运算符一类的逻辑：

class MyComponent extends React.Component {
  render() {
    return <p>Hello {this.props.someVar ?  'World' : 'Kitty'}</p>;
  }
}

概念三：Props & State又是啥？

你可能会疑惑上个例子里的this.props.someVar是从哪里冒出来的。

只要你对HTML有所了解，应该能够理解<a>标签的href属性是什么意思。延伸到React当中，属性就被称作props（properties的缩写）。组件之间可以通过Props进行交互。

class ParentComponent extends React.Component {
  render() {
    return <ChildComponent message="Hello World"/>;
  }
}
class ChildComponent extends React.Component {
  render() {
    return <p>And then I said, “{this.props.message}”</p>;
  }
}

也正因如此，React当中的数据流是单向的：数据只能从父组件传向子组件，反过来则不行。

可是组件不可能只接受从父组件传来的数据（例如还有用户在input当中的输入），这时state就派上了用场。

要注意，组件的state同样也能被传入到子组件中作为子组件prop的值。你需要明确的就是在React当中整个数据流都是向下传递的，包括路由、数据层、各个组件等等，从整个应用的state中来并汇聚到一起。

在组建中，我们可以通过一个叫setState的方法来修改state，一般我们都会在事件处理的方法中调用它：

class MyComponent extends React.Component {
  handleClick = (e) => {
    this.setState({clicked: true});
  }
  render() {
    return <a href="#" onClick={this.handleClick}>Click me</a>;
  }
}

概念四：组件API

在之前的内容当中我们已经提及了render和setState两个方法，他们都包含在组件API方法之中。还有一个比较有用的方法constructor，我们一般会在其中初始化state并做一些方法的绑定。

除了这三个方法之外，React还提供了一些列按照特定次序触发的生命周期函数。不过先不需要担心，只有当你深入一些了解React之后才有机会使用到它们。

我们并不会在这里展开篇幅讲解React的API，因为学习React更主要的目的是学习如何编程和它的构建理念，而不是死记硬背一些无聊的API方法。

概念五：组件类型

我们在React当中一般按照如下的方法定义一个组件：

class MyComponent extends React.Component {
  render() {
    return <p>Hello World!<p>;
  }
}

在Class中我们还可以申明一个组件的许多其他方法，而在更多的情况下我们可以写一种函数式组件。

类似于自定义一个模板标签一样，函数式组件接收一个props参数并返回特定的HTML内容，不过你当然仍可以在其中调用一些JS代码：

const myComponent = props => {
  return <p>Hello {props.name}! Today is {new Date()}.</p>
}

因为通常你的组件可能并不需要多么复杂的交互，也不需要多余的其他方法，用函数式写法可以让你的代码更加简洁。

当然在这样的组件当中你也没有办法使用setState方法，也即是说函数式组件没有state，所以也可以被称作是无状态组件。

当然，如果你接触React比较早，可能也见过下面这种写法：

var Greeting = React.createClass({ 
 
  render: function() {     
    return <h1>Hello, {this.props.name}</h1>;   
  }
});

总结：React的代码是由一个个的组件构成的。
组件采用了JSX语法扩展的写法。
数据流总是从父组件到子组件，除state可以通过调用方法修改之外。
组件包含一些特定方法和生命周期函数。
你也完全可以用函数声明只有render方法的无状态组件。
区分处理UI和数据逻辑的组件是一种很好的开发实践。
高阶组件函数可以传入一个组件并为其赋予更多功能。