react基本语法及组件

1、react简介

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

二、特色：

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

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

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

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

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

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

　　解释

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

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


二、命令式：你要作什么事情 按照流程书写告诉机器  让机器去实现　　　　　　　　　　　　如使用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

 

 

 

2、基本语法

一、对比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:回调函数

 

二、组件的使用

如：上述引入的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;

　　需注意的是：

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

二、在react当中全部的组件建立的时候必须首字母大写， 为了区分Element元素和组件的区别  如 App 

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

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

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

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

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

七、react中若是须要改变this.state里面的数据 须要用this.setState方法

　　　　　　用法为：

　　　　　　　　this.setState({

　　　　　　　　key:val

　　　　　　　　})

　　　　　　　　key:须要修改的状态

　　　　　　　　val:值

　　八、

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

　　如：

　　

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

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

 

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