React基础语法有哪些？react的基础语法的介绍（附实例）

本篇文章主要的介绍了关于react的基础语法介绍，还有关于state和props初始化方式的详解，接下来就让我们一起来看这篇文章吧

React基础语法

1.什么是React
 2.React组件
 3 State和Props
 4 React组件生命周期

1、React

React 是一个用于构建用户界面的 JAVASCRIPT 库。
 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React使用JSX来代替常规的JavaScript。JSX是一个看起来很像XML的JavaScript语法扩展。
注意

• JSX 中HTML标签用小写字母，React组件大写字母开头

• 属性使用小驼峰命名，第一个单词首字母小写其他大写字母开头

• 注意HTML标签的属性onclick和onchange等，在JSX中，必须写出onClick，写出小驼峰命名才有效。

• 为了支持JSX，需要在WebStrom中设置javascript为JSX Harmony

React 特性：
 1.声明式设计 −React采用声明范式，可以轻松描述应用。
 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
 3.灵活 −React可以与已知的库或框架很好地配合。
 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用   JSX ，但我们建议使用它。
 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

2、React组件两种实现方式与不同之处

因为React是一个用于构建用户界面的 JAVASCRIPT 库，所以首先引用三个js文件  ，也可以下载下来再本地引用。

82009ba41b15f51705420ba40a538ee32cacc6d41bbb37262a98f745aa00fbf0
abfd62c5aa399bcfd7beb6308b55f1ce2cacc6d41bbb37262a98f745aa00fbf0
726647b8f4ec8af879e4a70f56dccdd12cacc6d41bbb37262a98f745aa00fbf0
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7Title6e916e0f7d1e588d4f442bf645aedb2f
    7682b9a3d08eed176a4308470f476c472cacc6d41bbb37262a98f745aa00fbf0
    a8b6889a40c49db76102831f2183fd612cacc6d41bbb37262a98f745aa00fbf0
    a8a634993edeeb9b1cd75e43ca00a5762cacc6d41bbb37262a98f745aa00fbf0
    d87a8a64ee2bbb5de77d915dd08e24cd2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
803c97d8346ca6b8da89108d684ef6bb94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

 react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执
 行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）
一同使用可以让源码的语法渲染上升到一个全新的水平。

2.1 方式一：

class MyTextView extends React.Component{
    render(){
        return e388a4556c0f65e1904146cc1a846beehello react94b3e26ee717c64999d7867364b1b4a3;
    }
}
//组件渲染到DOM中  
ReactDOM.render(a4d1e0120195a60a9692a1c120c95952054fb429a2d2fb32ca4dca4607c66fb6,document.body);

• 必须继承React.Componet

• render()渲染函数是必须的

• >必选的方法，创建虚拟DOM，该方法具有特殊的规则：
  1、只能通过this.props和this.state访问数据
  2、可以返回null、false或任何React组件
  3、不能改变组件的状态
  4、不能修改DOM的输出

2.2方式二：

var MyTexTiew2  = React.createClass(
    {
        render:function () {
            return  e388a4556c0f65e1904146cc1a846beehi react94b3e26ee717c64999d7867364b1b4a3;
        }
    }
    );
ReactDOM.render(53ce64b5f535a04a91cafbb0f9bb455339edcc07d374c8b1e032d2a6a06eb03c,document.body);

• 使用createClass方法，传入对象，结构赋值render等方法和属性

• 使用这个方式才会执行组件的声明周期函数，才可以访问组件的state和props属性。

State和Props

State主要用于更新界面，组件的State属性在生命周期函数 getInitialState中初始化，当调用组件的this.setState改变state的时候，组件会重新渲染刷新。
 Props主要用于组件之间传递数据，也就是标签的属性 这里的pname属性就可以在MyText中通过this.props.pname得到

var MyTextView = React.createClass(
    {
     render:function(){
         return e388a4556c0f65e1904146cc1a846beecontent:{this.props.contentText}94b3e26ee717c64999d7867364b1b4a3;
     }
    }
);
var MyViewGroup = React.createClass({
    getInitialState:function () {
    //生命周期函数，返回一个对象
      return {text:""};
    },
    handleChange:function (e) {
    //改变组件的state属性
        this.setState({text:e.target.value});
    },
    render:function () {

        return e388a4556c0f65e1904146cc1a846bee
            f2023886b1e331e67cfc1ccb1ec0f1d4
            //注意属性onChange大写
            981869dd17be54337e2c38ef89b21efd96ac42c95369ad8c9dbbd274b6bcc83a
        94b3e26ee717c64999d7867364b1b4a3;
    }
});
ReactDOM.render(a9ad2d7d068754741782938dda7cf021,document.getElementById("content"));

React组件生命周期

实例化

首次实例化
   getDefaultProps
   getInitialState
   componentWillMount
   render
   componentDidMount

实例化完成后的更新
   getInitialState
   componentWillMount
   render
   componentDidMount

存在期
组件已存在时的状态改变
   componentWillReceiveProps
   shouldComponentUpdate
   componentWillUpdate
   render
   componentDidUpdate

销毁&清理期
   componentWillUnmount

生命周期共提供了10个不同的API。

1.getDefaultProps
作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

2.getInitialState
作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。

3.componentWillMount
在完成首次渲染之前调用，此时仍可以修改组件的state。（想看更多就到PHP中文网React参考手册栏目中学习）

4.render
必选的方法，创建虚拟DOM，该方法具有特殊的规则：
   只能通过this.props和this.state访问数据
   可以返回null、false或任何React组件
   只能出现一个顶级组件（不能返回数组）
   不能改变组件的状态
   不能修改DOM的输出

5.componentDidMount
真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
在服务端中，该方法不会被调用。

6.componentWillReceiveProps
组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

componentWillReceiveProps: function(nextProps) { 
        if (nextProps.bool) { 
            this.setState({ 
                bool: true 
            }); 
        } 
    }

7.shouldComponentUpdate
组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用

8.componentWillUpdate
接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。

9.componentDidUpdate
完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。

10.componentWillUnmount
组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

通过集成extends React.Component  给组件初始化不会执行getDefaultProps、getInitialState
只有通过以下方式给组件初始化state和props

1、state的初始化，通过构造函数

  //在构造函数中对状态赋初始值
    constructor(props){
        super(props);//第一步，这是必须的
        //不能调用state
        this.state = {//第二步，赋初始值
            time:0,
            on:false,
            log:[] //数组
        };
    }

2、props的初始化

class Button extends React.Component{
//静态属性，给属性赋默认值
static defaultProps = {
    onClick : null,
    className : '',
    text : '默认'
};

render(){
    return ef4946c73039c083200512dcbcc5f2b5{this.props.text}65281c5ac262bf6d81768915a4a77ac0;
}

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

以上是React基础语法有哪些？react的基础语法的介绍（附实例）的详细内容。更多信息请关注PHP中文网其他相关文章！