react基本语法及组件

一、react简介

1、起源：React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

2、特点：

1.声明式设计 −React采用声明式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟（虚拟DOM），最大限度地减少与DOM的交互。　　

3.灵活 −React可以与已知的库或框架很好地配合。　　

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

　　解释

　　　　a.声明式设计 和 命名式设计

1、声明式：你要做什么事情 直接告诉机器  让机器自己想办法去做   你只需要得到结果　　如数组中的map遍历
                    var arr = [1,2,3,4,5];
                    arr = arr.map((item)=>{
                        return item+=2
                    })
                   console.log(arr)

2、命令式：你要做什么事情 按照流程书写告诉机器  让机器去实现　　　　　　　　　　　　如使用for循环
                var arr = [1,2,3,4,5];
                for(var i=0;i<arr.length;i++){
                    arr[i]+=2;
                }

                console.log(arr)

　　　　b.虚拟DOM　（）

真实的js对象   虚拟DOM与数据相结合生成最终的DOM结构(真实)
如
            createElement("
                    <div>ffff</div>
                    <p>222</p>
                    <p>333</p>
                    <p>444</p>
                ")
中间的标签均为虚拟DOM

二、基本语法

1、对比vue中的基本指令学习react的基本语法，

vue中包含  v-text  v-html  v-v-bind  v-if和v-show  v-for  v-on  v-model

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

// jsx 语法
    // let Dom = <h2>这是h2标签包裹的内容，是jsx语法</h2>;

// let message = 'wppp';
// v-text
    // let Dom = <h3>{message} v-text</h3>

// v-html
    // let message = <h2>wpppp v-html</h2>
    // let Dom  = <div>{message}</div>

// v-bind
    // let message = 'wpppp v-bind';
    // let Dom = <h3 title={message}>{message}</h3>

// v-if  v-show
    // let message = 'wppp v-if v-show'
    // let Dom = true?<h3 title={message} style={{display:true?'block':'none'}}>{message}</h3>:'false'

// v-for
    // 不加key 会报警告：Warning: Each child in an array or iterator should have a unique "key" prop.

    // let arr = ['www','ppp','666']
    // let Dom = <ul>
    //     {
    //         arr.map((item,index)=>{
    //             return <li key={index}>{item}</li>
    //         })
    //     }
    // </ul>

// v-on
　　//语法与原生事件用法相同
// v-model

ReactDom.render(
    //
        Dom,
    // 调用外部引入的模块，不可直接用App 而应该用<App/>
        // <App/>,
    document.querySelector('#root'),
    ()=>{
        console.log('这是第三个参数，是回调函数')
    }
)
// render
// 参数1:需要渲染的组件或虚拟dom
// 参数2:将渲染好的组件放到哪个标签上面
// 参数3:回调函数

2、组件的使用

如：上述引入的App，（src 下的 index.js）

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

ReactDom.render(
    <App/>,
    document.querySelector('#root'),
    ()=>{
        console.log('这是第三个参数，是回调函数')
    }
)
// render
// 参数1:需要渲染的组件或虚拟dom
// 参数2:将渲染好的组件放到哪个标签上面
// 参数3:回调函数

引入的App ,　　(src 下的 App.js),案例如下

import React,{Component,Fragment} from 'react'
import ReactDom from 'react-dom'

class App extends Component{
    constructor(){
        super();
        this.state={
            firstname:'www',
            lastname:'ppp'
        }
    }
    render(){
        let {firstname,lastname} = this.state;
        return(
            <Fragment>
                <div onClick={this.handleClick1.bind(this)}>
                    <p>{firstname}</p>
                    <p>{lastname}</p>
                </div>
            </Fragment>
        )
    }
    handleClick1(){
        //
        this.setState({
            firstname:'eee',
            lastname:'ddd'
        })
    }
}
export default App;

　　需注意的是：

1、React.Component 所有组建的父类
直接在引用中引用，
import React ,{Component,Fragment} from "react";

2、在react当中所有的组件创建的时候必须首字母大写， 为了区分Element元素和组件的区别  如 App 

3、render
    类型：生命周期函数
    作用：渲染虚拟DOM
    特点：当render渲染虚拟Dom的时候会将数据和虚拟Dom结合形成真正的Dom结构，会将当前的虚拟Dom在缓存中保存一份，
　　　　　 当数据发生变化时会将缓存中的虚拟DOm和第二次改变的Dom进行对比。修改要改变的节点，而不是改变所有的虚拟Dom。

4、Fragment 作用当做节点标签使用 但是不会被渲染成标签

5、constructor 初始化函数 可以用来存放当前组件所需要的一些状态，为必写项！！！
　　　　且super() 为必须要写的！！！

　　　　　状态(属性)存放在 this.state = {} 里

6、react中的函数不用加()  如 <div onClick={this.handleClick1.bind(this)}>

7、react中如果需要改变this.state里面的数据 需要用this.setState方法

　　　　　　用法为：

　　　　　　　　this.setState({

　　　　　　　　key:val

　　　　　　　　})

　　　　　　　　key:需要修改的状态

　　　　　　　　val:值

　　8、

　　class 需要改变成className　　for 需要改变成htmlFor <label>

　　如：

　　

// let Dom = <div className="abc">wpppp</div>

// let Dom = <label htmlFor="11">11</label>

码字略累。。。且睡且长寿。。。。