React-基础语法

1.jsx 语法规则

定义：全称: JavaScript XML，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有两种组件形式：

• 函数组件

javascript 代码解读复制代码//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 必须调用，类的方法都会放在原型对象上；
  • 创建类组件：

  scala 代码解读复制代码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进行更新,且更新是一种合并，不是替换。

kotlin 代码解读复制代码//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数据

javascript 代码解读复制代码//创建组件
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

javascript 代码解读复制代码//创建组件
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 的方式代替。

csharp 代码解读复制代码// DOM　中定义
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>

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

• 回调形式：

typescript 代码解读复制代码// 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()

ini 代码解读复制代码// 当运行到 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 元素对象

ini 代码解读复制代码showData = (event)=>{
    console.log(event.target);
    alert(this.myRef.current.value);
}

5.收集表单数据

包含表单的组件分类：

• 非受控组件：页面输入类 DOM 的值是现用现取则是 非受控组件

javascript 代码解读复制代码//创建组件
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 的值随输入的值改变而维护到状态中，用的时候从状态中取出则受控组件

javascript 代码解读复制代码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()等等

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

javascript 代码解读复制代码function sum(a){
    return(b)=>{
        return (c)=>{
            return a+b+c
        }
    } 
}

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

javascript 代码解读复制代码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'))