React-基础语法

于 2021-08-26 23:38:12 发布
阅读量119 收藏
点赞数
分类专栏： React 文章标签： react.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50729201/article/details/119942851
版权

1.jsx 语法规则

定义：全称: JavaScript XML，\1. react定义的一种类似于XML的JS扩展语法: JS + XML本质是 React.createElement(component, props, …children) 方法的语法糖，用来简化创建虚拟DOM ；它不是字符串, 也不是HTML/XML标签，它最终产生的就是一个JS对象；

1>定义虚拟DOM时，不要写引号。
2>标签中混入js表达式时要用{}，遇到以 { 开头的代码，以JS语法解析
3>样式的类名指定不要用class，要用className.
4>内联样式，要用 style={key : value} 的形式去写
5>虚拟DOM元素只能有一个根元素
6> 虚拟DOM元素必须有结束标签
7.标签首字母：遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
(1).若小母开头，则将该标签转为html中同名元素，若htm1中无该标签对应的同名元素，则报错。
(2).若大好字母开头，react就去润染对应的组件，若组件没有定义，则报错。

8>jsx 语法只识别 js 语句，不识别 js 表达式，所以 jsx 语法必须产生一个值，可以用变量接收则为 js 语句：

  • 一定注意区分:【jsi语句(代码)】【js也达式】
  • 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地力，下面这些都是麦达式:
    1). a
    2). a+b
    3). demo(1)
    4). arr.map()
    5). function test () {}
  • 语句（代码）：下面这些都是语句(代码):
    (1).if(){}
    (2).for(){}
    (3).switch(){case : xxxx}

9>jsx 语法最终会被 babel 转换成 React.createElement() 方法，创建出虚拟DOM ， 关于虚拟DOM：

​ 1）.本质是Object类型的对象（一般对象）

​ 2）.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。

​ 3）.虚拟DOM最终会被 **ReactDOM.render( virtualDOM, containerDOM ) ** 转化为真实DOM，呈现在页面上。

2.组件

模块化与组件化的理解：模块化：模块是向外提供特定功能的js程序, 一般就是一个js文件，当应用的js都以模块来编写的, 这个应用就是一个模块化的应用；组件化：组价是用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)，当应用是以多组件的方式实现, 这个应用就是一个组件化的应用。

react有两种组件形式：

  • 函数组件
//1.创建函数式组件
function MyComponent(){
    console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
    return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /* 
        执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
        1.React解析组件标签，找到了MyComponent组件。
        2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/

  • 类组件

    • 类基本知识：类的构造器不是必须的，要对实例进行初始化操作时创建构造器。继承类且有构造器则 super 必须调用，类的方法都会放在原型对象上；
    • 创建类组件：
    class MyComponent extends React.Component { 
	render(){
        //render是放在哪里的? MyComponent的原型对象上，供实例使用;
 		//render中的this是谁?—MyComponent的实例对象 <=> MyComponent的组件实例对象

        <div>类组件</div>
    }
}
ReactDOM.render(<MyComponent />, document.getElementById('root'))

    • 类组件渲染过程：执行了ReactDOM.render(…之后，发生了什么?

      1.React解析组件标签，找到了Mycomponentl。

      2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上:的render方法。

      3.将render返回的虚拟 DOM 转为真实 DOM ，随后呈现在页面中

  • 简单组件：函数组件，无状态

  • 复杂组件：类组件，有状态

3.组件三大核心属性

state：

  • state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

  • 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

  • state 的值必须是对象，状态必须通过setState进行更新,且更新是一种合并，不是替换。

//1.创建组件
class Weather extends React.Component {
      //初始化状态
    state = {isHot:false,wind:'微风'}

    render(){
        const {isHot,wind} = this.state
        return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
    }

	//自定义方法————要用赋值语句的形式+箭头函数
    changeWeather = ()=>{
        const isHot = this.state.isHot
        this.setState({isHot:!isHot})
    }
}
//2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('root'))
props

  • 每个组件对象都会有props(properties的简写)属性

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

  • 通过标签属性从组件外向组件内传递变化的数据

  • 注意: 组件内部不要修改props数据

//创建组件
class Person extends React.Component{
    constructor(props){
        //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
        // console.log(props);
        super(props)
        console.log('constructor',this.props);
    }

    //对标签属性进行类型、必要性的限制
    static propTypes = {
        name:PropTypes.string.isRequired, //限制name必传，且为字符串
        sex:PropTypes.string,//限制sex为字符串
        age:PropTypes.number,//限制age为数值
    }

	//指定默认标签属性值
    static defaultProps = {
        sex:'男',//sex默认值为男
        age:18 //age默认值为18
    }

    render(){
        // console.log(this);
        const {name,age,sex} = this.props
        //props是只读的
        //this.props.name = 'jack' //此行代码会报错，因为props是只读的
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age+1}</li>
            </ul>
        )
    }
}

//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
  • 函数组件使用 props
//创建组件
function Person (props){
    const {name,age,sex} = props
    return (
        <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age}</li>
        </ul>
    )
}
Person.propTypes = {
    name:PropTypes.string.isRequired, //限制name必传，且为字符串
    sex:PropTypes.string,//限制sex为字符串
    age:PropTypes.number,//限制age为数值
}

//指定默认标签属性值
Person.defaultProps = {
    sex:'男',//sex默认值为男
    age:18 //age默认值为18
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
refs

  • 组件内的标签可以定义ref属性来标识自己

  • 字符串形式ref：不推荐使用，未来版本即将废弃，如果你目前还在使用 this.refs.textInput 这种方式访问 refs ，我们建议用回调函数或 createRef API 的方式代替。

// DOM　中定义
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>

// 使用
const {input1} = this.refs
alert(input1.value)
  • 回调形式：
// ref 定义的回调函数，会被 react 调用，且传入 DOM 本身
<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>

// 使用
showData = ()=>{
    const {input1} = this
    alert(input1.value)
}

//如果 ref 回调函数是以内联函数的方式定义的(上述方式)，因为不确定内联函数是否是最新的，在更新过程中它会被执行两次，第一次传入参数 null（用于清空函数），然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题（如下），但是大多数情况下它是无关紧要的。

saveInput = (c)=>{
    this.input1 = c;
    console.log('@',c);
}
<input ref={this.saveInput} type="text"/><br/><br/>
  • React.createRef()
// 当运行到 ref 时， react 会将当前DOM存储在 myRef 这个容器中，通过 current 属性会被获取。
// React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的，如果在不同 DOM 定义相同的 ref，则后面的 DOM 将顶替之前的 ref
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>

myRef = React.createRef()
showData = ()=>{
    alert(this.myRef.current.value);
}

4.事件处理

1). 通过onXxx属性指定事件处理函数(注意大小写)
a.React 使用的是自定义(合成)事件，而不是使用的原生DOM事件------为了更好的兼容性
b.React’的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2). 通过event.target得到发生事件的 DOM 元素对象

showData = (event)=>{
    console.log(event.target);
    alert(this.myRef.current.value);
}

5.收集表单数据

包含表单的组件分类：

  • 非受控组件：页面输入类 DOM 的值是现用现取则是 非受控组件
//创建组件
class Login extends React.Component{
    handleSubmit = (event)=>{
        event.preventDefault() //阻止表单提交
        const {username,password} = this
        alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                用户名：<input ref={c => this.username = c} type="text" name="username"/>
                密码：<input ref={c => this.password = c} type="password" name="password"/>
                <button>登录</button>
            </form>
        )
    }
}

//渲染组件		
ReactDOM.render(<Login/>,document.getElementById('test'))
  • 受控组件：页面输入类 DOM 的值随输入的值改变而维护到状态中，用的时候从状态中取出则受控组件
class Login extends React.Component{

	//初始化状态
    state = {
        username:'', //用户名
        password:'' //密码
    }

    //保存用户名到状态中
    saveUsername = (event)=>{
    	this.setState({username:event.target.value})
    }

    //保存密码到状态中
    savePassword = (event)=>{
    	this.setState({password:event.target.value})
    }

    //表单提交的回调
    handleSubmit = (event)=>{
        event.preventDefault() //阻止表单提交
        const {username,password} = this.state
        alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
    }

    render(){
        return(
            <form onSubmit={this.handleSubmit}>
            用户名：<input onChange={this.saveUsername} type="text" name="username"/>
            密码：<input onChange={this.savePassword} type="password" name="password"/>
            <button>登录</button>
            </form>
        )
    }
}

6.高阶函数-函数柯里化

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

​ 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。

​ 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。

​ 常见的高阶函数有：Promise、setTimeout、arr.map()等等

​ 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

function sum(a){
	return(b)=>{
  		return (c)=>{
        	return a+b+c
    	}
	} 
}

react 中不用函数柯里化的实现：

class Login extends React.Component{
    //初始化状态
    state = {
        username:'', //用户名
        password:'' //密码
    }

    //保存表单数据到状态中
    saveFormData = (dataType,event)=>{
        this.setState({[dataType]:event.target.value})
    }

    //表单提交的回调
    handleSubmit = (event)=>{
        event.preventDefault() //阻止表单提交
        const {username,password} = this.state
        alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
                密码：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
                <button>登录</button>
            </form>
        )
    }
}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
m0_50729201
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值