react系列- 什么是 react

是什么

React 起源于 Facebook 内部项目，是一个用来构建用户界面的 Javascript 库，相当于MVC架构中的V层框架，与市面上其他框架不同的是，React 把每一个组件当成了一个状态机，组件内部通过 state 来维护组件状态的变化，当组件的状态发生变化时，React 通过虚拟DOM技术来增量并且高效的更新真实DOM。

React 只是一个前端的 javascript 库， 它只是关注于视图层。

实例

下面我们通过一个例子来看下 react

<div id="app"></div>
<!-- 核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- dom操作 -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- jsx -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 函数式组件
const InitDom = (props) => {
    const  { name } = props.comData
    return (
        <h1>Hello, {name}!</h1>
    )
}
ReactDOM.render(<InitDom comData={{name:'王小花'}}/>,document.getElementById('app')
);

// 类式组件
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));

</script>

我们定义了一个简单的 react 组件函数：

1. 注意函数名首字母要大写
2. 通过给箭头函数传递 props 参数, 来获取到绑定在组件上的属性 comData
3. 通过对象解析获取到 name 对象属性，
4. 通过jsx语法，return ( {name} ) 返回生成的html
5. 通过ReactDOM.render函数，绑定组件 和 指定的 dom元素
6. 类式组件中，有一个内置的props 属性，可以更方便的获取到传递的属性值。

简单的介绍下 jsx 语法，通过 {...} 获取到变量的值, 它相当于封装了一个 js 的语言环境，可以在内做变量的运算。

完