01-React基础语法（1）

一、React 简介

　　React 是一个很火的 js库或框架（facebook）

二、React 和 Vue 对比

　　1.组件化方面

　　　　 React：由FaceBook前端官方团队进行维护和更新的（有背景，技术实力比较雄厚）；

　　　　Vue：起初由作者尤雨溪专门进行维护的，回来2.x 版本后尤雨溪主导的开源团队维护和更新；

　　2.社区方面

　　　　在社区方面，React由于诞生的较早，所以社区比较强大，一些常见的问题、坑、最优解决方案，文档、博客在社区中都是可以很方便就能找到的；

　　　　Vue的社区现在也非常的成熟，找不到的也可以百度或谷歌

　　3.移动App方面

　　　　 Vue，结合 Weex 这门技术，提供了迁移到移动端App开发的体验

　　　　React，结合 ReactNative，也提供了无缝迁移到移动App的开发体验

　　　　相对而言：普遍uniapp去写或微信小程序

　　vue更官方化（约束）

　　react更社区化（自由）

三、原生语法

　　1.导入 js 库

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">

　　2.创建页面元素

　　　　// 语法：React.createElement(待创建的标签名，待创建的标签属性对象/null，子内容) const element = React.createElement('h1', { title: 'this is h1 tag' }, 'hello，word')

　　3.创建容器渲染

　　　　// 语法：ReactDOM.render(元素对象，监控范围标签对象) ReactDOM.render(element, document.querySelector('#app'))

四、JSX

　　JSX语法创建元素

　　1.导入 js 库

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
// 需要 导入babel转义JSX
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

　　2.JSX创建页面元素

<script type="text/babel">
// 注意：type 类型
    
    const h1Element = <h1 title="this is h1 tag">hello，word</h1>
</script>

　　3.渲染页面

ReactDOM.render(ulElement, document.querySelector('#app'))

五、组件&Props

注：使用 ES6 语法创建组件

　　1.创建组件

class Reg extends React.Component 
{ // 留心React.Component大小写

    // constructor根据情况写（举例：声明组件状态、接受组件参数等）

    // 渲染
    render() {
        return (
            <div>
                <p>
                    用户名：
                    <input type="text" name="uname" />
                </p>
                <p>
                    密码：
                    <input type="password" name="pwd" />
                </p>
                <p>
                    <input type="submit" value="注册" />
                </p>
            </div>
        )
    }
}

　　2.页面渲染

ReactDOM.render(<Reg />, document.querySelector("#app"))

六、组件传值

　　1.创建组件

class Modal extends React.Component
{

    render() {
        
        return (
            <div>
                <p>状态：{this.props.status} </p>
                <p>提示信息：{this.props.msg} </p>
            </div>
        ) 
    }
}

　　2.渲染传值

ReactDOM.render(
    <div>
        <Modal status="false" msg="hello" />
    </div>
, document.querySelector("#app"))

七、组件状态

　　概念：react组件中的状态，相当于vue组件中的data模型数据

　　函数组件：无状态组件

　　类组件：有状态组件

　　1.定义组件

class Test extends React.Component
{
    constructor(props)  // 调用test组件 接受数据
    {
        super(props)  // 通过super调用父构造函数，并传递给父

        // 声明状态
        this.state = {
            date: (new Date).getTime(),
            num: 666
        }
    }

    render() 
    {
        return (
            <div>
                <h1>{this.state.date}</h1>
                <h1>{this.state.num}</h1>
            </div>
        ) 
    }
}

　　2.渲染组件

ReactDOM.render(<Test />, document.querySelector('#app'))

　　3.更新模型方法

　　API ： setState()

class Test extends React.Component
{
    constructor(props)
    {
        super(props)

        // 声明状态
        this.state = {
            num: 666
        }
    }
    // 使用箭头函数，解决 this 指向问题
    updateNumFn = () => {
        // 1. 获取
        let num = this.state.num + 1
        // 2. 更新
        this.setState({
            num
        })
    }

    render() 
    {
        return (
            <div>
                <h1>{this.state.num}</h1>
                <button onClick={this.updateNumFn}>更新</button>
            </div>
        )
    }
}

注：需要使用箭头函数解决 this 指向问题

八、事件处理

　　步骤1：定义方法（小驼峰）

　　步骤2：声明事件，例如：onClick=函数名（注：1-不加引号，2-传递参数加小括号）

　　1.定义组件方法

class Login extends React.Component
{
    //定义事件
    clickFun1Fn()
    {
        alert(1)
    }
    render() 
    {
        // 脚下留心：input框别忘记 结束斜杠 
        return (
            <div>
                {/* 添加点击方法 */}
                <input type="submit" value="点击" onClick={this.clickFun2} />
            </div>
        );
    }
}

九、事件传参

　　语法：

on事件类型={e => this.函数名(实参1,..,实参n，e)} 
on事件类型={this.函数名.bind(this, 实参1,..,参数n)}  bind改变this执行 推荐

　　案例

class Test extends React.Component
{
    delFn1()
    {
        alert(1);
    }

    delFn2(id)
    {
        console.log(id)
        console.log(this)
    }

    render() 
    {
        return (
            <div>
                { /*不传参*/ } 
                <button onClick={this.delFn1}>删除1</button>
                { /*传参*/ }
                <button onClick={(e) => this.delFn2(55,e)}>删除2</button>
                <button onClick={this.delFn2.bind(this, 55)}>删除3</button>
            </div>
        )
    }
}