React学习----基础知识

在上一篇React学习——环境搭建以及脚手架安装学习了如何搭建环境和使用脚手架创建项目，接下来在这里插入代码片就开始学习React的基础知识。

1. JSX

JSX，是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX。
JSX是语法糖，通过babel转成React.createElement函数，JSX的本质是React.createElement()函数。

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。

const element = <h1>Hello, {1 + 2}</h1>;

2. 组件

什么是组件？组件就是页面的一部分。
比如百度的首页，logo部分可以单独划分成一个组件，搜索部分也可以单独成为一个组件，百度热榜也可以单独成为一个组件。
每个组件在项目中都是一个单独的js/jsx文件。

组件分为函数组件（无状态组件），class组件（有状态），

• 函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• class组件

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

他们都是通过ReactDOM.render（）渲染到页面中

3. props

组件之间的通信

• 父组件通过绑定属性的方法向子组件传递信息，子组件通过props接受来自父组件的信息，props是只读的；
• 子组件通过调用父组件绑定的属性值，向父组件传递信息；

4. state

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

state是组件内部的，外部是不能修改state中的属性值的，组件内想修改state中的属性值，只能使用setState（）

5. 组件的生命周期函数

装载组件触发

• componentWillMount
  只会在装载之前调用一次，在 render 之前调用，你可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 render
• componentDidMount
  只会在装载完成之后调用一次，在 render 之后调用，从这里开始可以通过 ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。

更新组件触发

这些方法不会在首次 render 组件的周期调用

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

卸载组件触发

• componentWillUnmount