React 第一节新框架！新开始！

最新推荐文章于 2024-05-07 18:22:02 发布

i'm_zhangting

最新推荐文章于 2024-05-07 18:22:02 发布

阅读量160

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/weixin_42549581/article/details/90732594

版权

React 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

三个库
react 核心库 development 开发环境
react-dom 提供和DOM相关的功能
babel 转码器

JSX 模板语言
是JS语法的扩展，又叫语法糖（是一种便捷的写法），在JS代码中直接写HTML标记

渲染三步骤
1、定义容器用于存放虚拟DOM
2、创建虚拟DOM
3、渲染虚拟DOM到页面

<!DOCTYPE html>
<html>
  <head>
    <title>react</title>
    <meta charset="UTF-8" />
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="my"></div>

    <script type="text/babel">
    //第一种 通过react渲染
    var li1 = React.createElement('li',null,'111'); //(标签名，样式名，内容)若无样式，设置未null;
    var li2 = React.createElement('li',null,'222');
    var ul = React.createElement('ul',{className:'ul-1'},li1,li2);
    
    //第二种方式 通过jsx渲染 
    var name = 'sonia';
    var div = <div><h1>{name}</h1><div>1234</div></div>;
    //渲染
    ReactDOM.render(
       div,
       document.getElementById("my")
    );

    //第三  组件   定义一个组件   ES6  CLASS来定义一个组件
    class Hello extends React.Component {
      render(){
        var name = 'abc';
        return (
          <div>
            <h1>hello world</h1>
            <h2>{name}</h2>
          </div>
        )
      }
    };
    ReactDOM.render(
      <Hello></Hello>,
      document.getElementById("my")
    );

    </script>
  </body>
</html>

state 数据状态修改状态值会对组件进行重新渲染

类似 vue 中的 data
修改state：通过this.setState来修改值；

Tab切换实例

<div id="my"></div>
<script type="text/babel">
	class Tab extends React.Component {
		constructor(){
			super();
			this.state = {
				flag:true
			}
		}
		change1(){
			this.setState({
				flag:true
			})
		}
		change2(){
			this.setState({
				flag:false
			})
		}
	    render(){
	      return (
	        <div>
	          <ul>
	          	<li className={this.state.flag ? 'selected' : ''} onClick={()=>this.change1()}>标题A</li>
	          	<li className={!this.state.flag ? 'selected' : ''} onClick={()=>this.change2()}>标题B</li>
	          </ul>
	          <div>
	          	{this.state.flag ? <p>内容A</p> : <p>内容B</p>}    	
	          	
	          </div>
	        </div>
	      )
	    }
	};
    ReactDOM.render(
      <Tab></Tab>,
      document.getElementById("my")
    );
</script>

第二种写法：

<div id="my"></div>
<script type="text/babel">
	class TabA extends React.Component {
      render(){
        return(
          <div>
            <h1>我是内容A</h1>
          </div>
        )
      }
    }
    class TabB extends React.Component {
      render(){
        return(
          <div>
            <h1>我是内容B</h1>
          </div>
        )
      }
    }
    class Tab extends React.Component {
      constructor(){
        super();
        this.state ={
          flag:true
        }
      }
      
		/*
		change(type){
			if(type == '1'){
				this.setState({
					flag:true
				})
			}else{
				this.setState({
					flag:false
				})
			}
		}
		*/
      change(type) {
        this.setState({
          flag:type
        })
      }
      render(){
        var flag = this.state.flag;
        return (
          <div>
           <ul>           	
	         	/*
	         	<li className={this.state.flag ? 'selected' : ''} onClick={()=>this.change('1')}>标题A</li>
	         	<li className={this.state.flag ? 'selected' : ''} onClick={()=>this.change('2')}>标题B</li>
	         	*/
              <li className={flag ?'selected':''} onClick={()=>this.change(true)}>标题A</li>
              <li className={!flag ?'selected':''} onClick={()=>this.change(false)}>标题B</li>
           </ul>
           <div>
              {this.state.flag ? <TabA/> : <TabB/>}
           </div>
          </div>
        )
      }
    };	
    ReactDOM.render(
      <Tab></Tab>,
      document.getElementById("my")
    );
</script>