React学习路线

React学习路线

1、什么是React？

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

2、React 特点：

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

3、React 组件：

我们可以使用函数定义了一个组件：

function HelloMessage(props) {
   
    return <h1>Hello World!</h1>;
}

也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
   
  render() {
   
    return <h1>Hello World!</h1>;
  }
}

4、React 三大属性：

        4.1.1、props属性

       react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

       4.1.2、props属性的特点：

              1.每个组件对象都会有props（properties的简写）属性

              2.组件标签的所有属性都保存在props中

              3.内部读取某个属性值：this.props.propertyName

              4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）

              5.对props中的属性值进行类型限制和必要性限制

代码示例：

使用函数组件：

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    //使用函数组件
    function User(props){
   
        //在组件中获取props属性值
    	return <div>{
   props.name}，{
   props.age}</div>
    }
    
    //定义数据
    const person ={
   
        name:'张三',
        age:20,
        sex:'男'
    }