React基本使用-一一网

hello React

 <div id="root"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script>
        const title = React.createElement('h1', null, 'hello React')
        ReactDOM.render(title, document.getElementById('root'));
    </script>
复制代码

使用JSX语法

  <div id="root"></div>
    <!-- JSX相当于是语法糖 -->
    <!-- 虚拟dom本质是Object类型的对象 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const title = 'hello JSX语法';
        const vDOM =(<h1 style={{color: 'red' }}>{title}</h1>)      
        ReactDOM.render(vDOM,document.getElementById('root'));
    </script>
    <!-- 
        JSX语法规则：
        1.定义虚拟dom时，不要用引号
        2.标签中混入`  js表达式  `时用{}
        3.样式的类名用className
        4.内联样式，常用style={{}}
        5.只有一个根标签
        6.标签必须闭合
        7.标签首字母若是小写 则转换味html中同名元素
                    若是大写 则当组件处理
     -->
复制代码

解决React使用JSX语法在Vscode自动保存后报错问题：

下载此插件

卸载此插件

JSX语法练习

    <div id="root"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const data = ['vue','react','angular'];
         ReactDOM.render(
        <div>
            <h1 style={{color: 'red'}}>前端三大主流框架</h1>
            <ul>
                {data.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })}
            </ul>
        </div>,document.getElementById('root'));
    </script>
复制代码

组件基础

<div id="root1"></div>
    <div id="root2"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        //创建函数式组件
        function MyComponent(){
            return <h1>组件基础--函数式组件【适用于简单组件--无状态】</h1>
        };
        //渲染到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('root1'));
  
        //创建类组件
        class MyComp extends React.Component {
            //render是在MyComp的原型对象，供实例使用
            render(){
                console.log(this)  //组件实例对象
                return (
                    <h1>组件基础--类组件【适用于复杂组件--有状态】</h1>
                )
            }
        }
        ReactDOM.render(<MyComp/>,document.getElementById('root2'));
    </script>
复制代码

组件实例属性state

    <div id="root"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      //注意：类中的方法局部开启了严格模式 若不是组件实例调用则不会指向实例 指向undefined
       class Weather extends React.Component{
           constructor(props){
               console.log('constructor')  // 调用1次
               super(props)
               this.state = {isHot:false} 
            // this.changeWeather = this.changeWeather.bind(this)  改变类中方法this的指向 生成一个新的函数
               this.demo = this.changeWeather.bind(this)
           }
           render(){
               console.log('render')  //调用1+n次  n为更新状态的次数
               // console.log(this) 组件实例对象
               return (
                   <div>
                       <h1>组件核心之一state</h1>
                       <h2 onClick={this.demo}>今天天气{this.state.isHot ? '炎热' : '凉爽'}</h2>
                    </div>
               )
           }
           changeWeather(){
               //调用n次
               const isHot = this.state.isHot
               //借助内置api更改state
               this.setState({
                   isHot:!isHot
               })
           }
       }
       ReactDOM.render(<Weather/>,document.getElementById('root'));
复制代码

简写如下：

//同上效果
<script type="text/babel">
         class Weather extends React.Component {
             state = {isHot:true}   //这样写也是实例上的属性
             render(){
                 const {isHot} = this.state
                return (
                   <div>
                       <h1>组件核心之一state</h1>
                       <h2 onClick={this.changeWeather}>今天天气{isHot ? '炎热' : '凉爽'}</h2>
                    </div>
               )
             }
             //箭头函数中this指向声明时上下文
             changeWeather = ()=>{
                 const {isHot} = this.state
                 this.setState({isHot:!isHot})
             }
         }
         ReactDOM.render(<Weather/>,document.getElementById('root'));
</script>
复制代码

组件实例属性props

<div id="root"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script type="text/babel">
        class Person extends React.Component {
            render(){
                const {name,age} = this.props
                return (
                    <ul>
                        <li>name:{name}</li>
                        <li>age:{age}</li>
                    </ul>
                )
            }
        }
        //类型验证
        Person.propTypes = {
            name: PropTypes.string.isRequired,
            age:PropTypes.number,
        }
        //默认值
        Person.defaultProps = {
            age:18
        }
         ReactDOM.render(<Person name='jiangyao'/>,document.getElementById('root'))
        // const batch = {name:'jiangyao',age:21}
        // ReactDOM.render(<Person {...batch}/>,document.getElementById('root'));
    </script>
复制代码