React学习回顾-react基本语法前言一图胜千言~，王者荣耀微信区猪八戒请求出栈~ 来到公司即将5个月了，这五个月

前言

一图胜千言~，王者荣耀微信区猪八戒请求出栈~ 来到公司即将5个月了，这五个月时间也从原来的vue技术栈换成了react技术栈，因为二者都用过的缘故，还有一些其他因素，因而有了这篇文。

1、vue与react区别

除去数据绑定方式（react数据单向绑定，vue数据双向绑定）和语法不同外，令我感觉比较深的就是vue的结构比较固定而react比较自由，并且react有着很大的生态系统，vue比react好上手。

2、react知识点

react是用于动态构建用户界面的 JavaScript 库(只关注于视图)，由Facebook开源

2.1 react基本使用

1.cdn方式引入文件

<!-- 引入react核心 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <!-- 引入babel 用于将jsx编译成js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

2.使用脚手架

npx create-react-app my-app
cd my-app
npm start

3.cdn方式简单例子

<body>
    <div id="test"></div>
    <!-- 引入react核心 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- 引入babel 用于将jsx编译成js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        // 创建函数式组件
        function MyComponent(params) {
            console.log(this)  //此处undefined   babel翻译完毕开启严格模式
            return <h1>what does the fox say?</h1>
        }
        //将dom挂载到test根节点
        ReactDOM.render(<MyComponent/>, document.getElementById('test'));
    </script>
</body>

2.2 react JSX

1. 全称: JavaScript XML

2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component,props, ...children) 方法的语法糖

3. 作用: 用来简化创建虚拟DOM

写法：

var ele=<h1>Hello JSX!</h1>

注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象

4. 标签名任意: HTML标签或其它标签

5. 标签属性任意: HTML标签属性或其它

6. 表达式(有返回值)用{}包裹

7. 类名为className

.....

2.3 react 组件三大核心属性

react组件分为函数组件和类组件，组件名必须大写，组件中又有三大核心属性。

2.31 state

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.32 props

每个组件中都会有props属性
组件标签的所有属性都存在props中
通过组件外部向组件内部传递props
组件内部不要直接修改props（可通过子组件接收父组件方法来修改）

2.33 ref

使用ref有如下两种方式：

字符串refs

<input ref="input1" id="input1" type="text" placeholder="点击按钮提示数据"/>
//使用 字符串refs 存在效率问题 可能在未来版本移除
const input2 = this.refs.input1;

createRef

myRef = React.createRef();
<input type="text" ref={this.myRef} />

2.4 react生命周期

2.42新版本：

下图是react官网的生命周期图，平时开发如图所示的生命周期就够用，分为挂载和更新卸载三个阶段,新版的删除了一些。

挂载阶段生命周期执行顺序：constructor render componentDitMount
更新阶段生命周期执行顺序：render componentDidUpdate
卸载阶段生命周期执行顺序：componentWillUnMount

React学习回顾-react基本语法

前言