React学习笔记—基础语法(一)

一、React基础介绍

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框 架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套 东西很好用,就在2013年5月开源了

二、视图层的开发模式与函数式编程

React 并不是完整的 MVC/MVVM 框架,它专注于提供清晰、简洁的 View(视图) 层解决方案。

React 中的虚拟DOM:

函数式编程:

函数式编程的好处:


三、React官方脚手架create-react-app的使用

1、全局安装脚手架:

cnpm install create-react-app -g
yarn add create-react-app -g

2、使用脚手架创建项目

创建项目:create-react-app myapp
启动项目:npm start

四、JSX语法和组件

1、JSX语法简介:

JSXHTML 语法直接加入到 JavaScript 代码中,再通过翻译器转换到纯 JavaScript 后由浏览器执 行。在实际开发中,JSX 在产品打包阶段都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代 码更加直观并易于维护。 编译过程由BabelJSX 编译器实现。

2、JSX语法书写需要注意:

  • 组件首字母是大写 会被认为是自定义组件,首字母是小写,会被认为是 原生dom 节点
  • 组件最外层需要被一个标签包裹,不能有兄弟节点
  • return (加上小括号,可以回车)
  • 组件可以嵌套
  • 函数式写法和 class 写法 (无状态组件的编写方式 )
  • 注释的写法 {这里面写注释} {//单行} {/多行/}
  • JSX 语法中样式的书写:
    • class ==> className , for ==> htmlFor(label)
    • 行内样式(facebook 推荐),注意 font-size 的写法,要是有驼峰写法
  • JSX 语法中事件的书写:
    • 箭头函数
    • bind 改变 this 指向
    • 与普通事件的区别
  • JSX 语法中 ref 的书写:
    • 给标签设置 ref=”username” ,通过这个获取 this.refs.username ,ref 可以获取到应用的真实 dom
    • 给组件设置 ref=”username”, 通过这个获取 this.refs.username ,ref 可以获取到组件对象
    • 给标签设置 ref={(el)=>{myele=ele;}} ,访问 myele

3、类式组件和函数式组件:

类式组件:

import React, { Component } from 'react'

// 1- class 类式组件
class Hello extends React.Component {
    render() {
        // render 将来的生命周期
        return (
            <div>
                <Child></Child>
            </div>
        )
    }
}

class Child extends Component {
    render() {
        return (
            <ul>
                <li>22222</li>
            </ul>
        )
    }
}

export default Hello

函数式组件:

import React, { Component } from 'react'

// functional 函数式组件,并不是后面要讲的Hooks,
// React16.8 之前 函数式组件不支持状态,支持属性
// React16.8 之后 引入了 React Hooks 支持状态和属性了

// 函数式组件普通写法
function Child2() {
    return <div>33333</div>
}

// 箭头函数写法
const Child3 = () => <div>44444</div>

export default Hello

类式组件和函数式组件的区别:

  • 类式组件支持状态和属性
  • React16.8 之前 函数式组件不支持状态,支持属性
  • React16.8 之后 引入了 React Hooks 支持状态和属性了

五、React组件中设置CSS样式

1、导入外部CSS样式:

css 文件:

.active{
    background-color: blue;
}
#aaa{
    background-color: blueviolet;
}

js 文件:

import React, { Component } from 'react'
import './css/index.css'  // css-loader

class App extends Component {
    render() {
        return (
            < div >
                <ul>
                    {
                        // 单行注释
                        /* 多行注释 */
                    }
                    <li className="active">3333333333</li>
                    <li id="aaa">555555</li>
                </ul>
            </div >
        )
    }
}

/* 
    16 版本之前  class不支持,必须写成 className(因为class是es6的关键字)
    16 版本之后  class支持,但是会报警告,className
*/

export default App

2、在内部书写CSS样式:

js 文件:

import React, { Component } from 'react'

class App extends Component {
    render() {
        var myname = "kerwin" // 不是状态。只是一个临时变量
        var styleObj = {
            background: "red",
            fontSize: "30px"
        }
        return (
            <ul>
                {10 + 20}---{myname}
                {10 > 20 ? "aaa" : "bbb"}
                {
                    // 单行注释
                    /* 多行注释 */
                }
                <li style={styleObj}>11111</li>
                <li style={{ background: "green" }}>2222222</li>
            </ul>
        )
    }
}

/* 
    16 版本之前  class不支持,必须写成 className(因为class是es6的关键字)
    16 版本之后  class支持,但是会报警告,className
*/

export default App

六、React组件中ref获取原生对象 && 绑定事件

1、React中通过ref获取原生对象:

需要在标签上绑定 ref 属性
通过 this.refs.[属性名] 获取原生对象

import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div>
                {/* react 中没有指令 v-model */}
                {/* react 通过ref拿value */}
                <input type="text" ref="mytext" />
                <button onClick={() => {
                    console.log(this.refs.mytext.value);
                }}>add</button>
            </div>
        )
    }
}

export default App

2、React中绑定事件:

方法一 直接在按钮里写事件:

import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div>
                {/* react 中没有指令 v-model */}
                {/* react 通过ref拿value */}
                <input type="text" ref="mytext" />
                <button onClick={() => {
                    console.log(1111);
                    console.log(this.refs.mytext.value);
                }}>add</button>
            </div>
        )
    }
}

export default App

方法二 使用函数自定义事件:

  • 需要使用 bind 改变 this 指向,才能拿到原生对象
import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div>
                {/* react 中没有指令 v-model */}
                {/* react 通过ref拿value */}
                <input type="text" ref="mytext" />

                {/* 这种写法需要使用bind改变this指向,方便拿到value值 */}
                {/* 这种方法一定不要加小括号,加上小括号就执行函数返回undefined了 */}
                <button onClick={this.handleClick.bind(this, "aaa", "bbb")}>add2</button>
            </div>
        )
    }
    handleClick(x, y) {
        console.log(33333, this.refs.mytext.value);
        console.log(x, y);
    }
}

export default App

方法三 使用箭头函数绑定事件:

  • 不需要传参的写法:
import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div>
                {/* react 中没有指令 v-model */}
                {/* react 通过ref拿value */}
                <input type="text" ref="mytext" />
                <button onClick={ this.handleClick1 }>add3</button>
            </div>
        )
    }

    handleClick1 = () => {
        console.log(this.refs.mytext.value);
    }
}

export default App
  • 需要传参的写法:
import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div>
                {/* react 中没有指令 v-model */}
                {/* react 通过ref拿value */}
                <input type="text" ref="mytext" />
                <button onClick={() => this.handleClick1(1111)
                }>add4</button>
            </div>
        )
    }
    handleClick1 = (aa) => {
        console.log(aa, this.refs.mytext.value);
    }
}

export default App

七、React中定义状态和修改状态

1、在React中使用state定义状态

通过 this.state.[状态名] 方法访问状态:

import React, { Component } from 'react'

class Map extends Component {
    state = {
        myname: "liutao",
    }
    render() {
        return (
            <div>
                aaa---{this.state.myname}
            </div>
        )
    }
}

export default Map

2、在React中使用setState修改状态

不能直接修改状态 ,要通过 setState
通过 setState 方法修改状态:

import React, { Component } from 'react'

class Map extends Component {
    state = {
        dataList: [
            { id: 1, name: "aa" }
        ]
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>click</button>
                {
                    this.state.dataList.map(item =>
                        <li key={item.id}>{item.name}</li>
                    )
                }
            </div>
        )
    }
    handleClick = () => {
        this.setState({
            myname: "xiaoming"
        })
    }
}

export default Map

八、React中使用map映射遍历数据

1、例子:

import React, { Component } from 'react'

class Map extends Component {
    state = {
        dataList: [
            { id: 1, name: "aa" }
        ]
    }
    render() {
        return (
            <div>
                {
                    this.state.dataList.map(item =>
                        <li key={item.id}>{item.name}</li>
                    )
                }
            </div>

        )
    }
}

export default Map

2、注意:

遍历的时候需要绑定 key 值,方便数据修改的时候做对比,key 值一般绑定 id


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:React学习笔记—基础语法(一)

文章字数:2k

本文作者:Spicy boy

发布时间:2020-03-26, 23:58:42

最后更新:2021-03-08, 17:37:44

原始链接:http://www.spicyboy.cn/2020/03/26/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95-%E4%B8%80/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏