「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」。

简介

React是用于构建用户界面的声明性，高效且灵活的JavaScript库。

它使您可以从孤立的小代码段（称为“组件”）组成复杂的UI。

用于构建用户界面的 JavaScript 库, 它是FaceBook的一个开源项目

它的设计模式为Javascript MV* 框架 (MVC/MVVM/MVP/MV*), 无论是哪种MV**系列，都涉及到了Model和View，如果单纯的只有Model和View，他们是没有办法一起协同工作的，所以就有了各种MV..的设计模式

它是针对UI层的Web-webApp应用方案

使用JS的代码,只需要加大花括号

使用步骤

引入react.js和react-dom.js, 如果使用jsx语法, 需要再引入babel.js

- react-dom.js 处理跟DOM相关的操作, 暴露对象为ReactDOM
- babel.js 是为了将jsx语法, 通过babel编译成ES5的代码运行在浏览器中

声明根标签(用于指定虚拟DOM挂载的位置)
在script标签上, 声明JSX语法, type="text/babel"

- JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。
- 元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

ReactDOM.render(), 把虚拟DOM挂载到哪个标签身上, 给用户查看

<!--  1. 引入react.js 和 react-dom.js, 以及 babel.js--> 
<script src="./build/react-0.14.0.js"></script>
<script src="./build/react-dom-0.14.0.js"></script> 
<!--    就是babel.js, 文件名不同而已 --> 
<script src="./build/browser.min.js">
</script> 
</head> 
<body> 
<!--2. 准备根标签, react的虚拟DOM, 会挂载到这DOM下, 此div下, 都是react的东西 --> 
<div id="app"></div> 
<!--3. 加入type="text/babel", 此处代码, 需要转义--> <script type="text/babel">
// 4. 给根标签中, 加入元素     
// 利用ReactDOM的render方法, 渲染标签到指定的位置     
// 参数1: 要渲染的标签,     
// 参数2: 渲染到哪个位置     
ReactDOM.render(         
    <h1>Hello, React</h1>,         
    document.getElementById("app")
) <script/>

变量使用

HTML 中使用 JS, 用大括号
在render内, 只能有一个根标签

let brr = ["春天","秋天","夏天","冬天"];     
ReactDOM.render(         
<div>            
{              
    brr.map((str,index) =>{
        return <h1 key={index}> { str } </h1>
    })             
}               
</div>,      
document.getElementById('app') )

属性使用

JSX里的一些关键字, 和标签的属性会重名, 所以JSX要求

原生的class -> className 代替
原生的for属性 -> htmlFor 代替
单标签, 最后一定要加上 /
属性都采用驼峰标识 (比如原生事件onclick, 就要写成onClick)

JSX语法一定要严格, 因为它比较死板

动态class: className={obj['later'] ? 'success' : 'error'}

方法使用

在JS中ReactDOM.render()之外定义方法
在JSX语法标签模板中, {方法名()} 使用即可
方法里可以返回标签/返回标签数组/用于事件的方法上

事件都要使用驼峰标识, 跟原生onclick有些差别

<button onClick={fnThree}>点我</button>

标签创建

这里只是创建一个标签对象, 不是组件

React.createElement() 
方法 
// 参数1: 标签名    
// 参数2: 标签属性 (是个对象)    
// 参数3: 此标签的内容 (可以理解为innerHTML)    
let titleCom = React.createElement(        
    "p",       
    {"className": 'title_p'},        
    "Hello, React"   
); 
//注意:创建的是标签,而不是组件,所以不以自定义标签来使用 
React.render(         
<div>            
    {titleCom}         
</div>,    
document.getElementById("app")  )

组件创建(三种方式)

React.createClass({})
构造函数function 组件名(){} 函数名大写
class 组件名 extends React.Component (组件名要大写) 常用

<script type="text/babel">         
// 3.class声明继承与React.component基类(声明组件)创建的组件         
class HelloWorld3 extends React.Component{             
render(){  //render的作用就是返回你要渲染的标签                 
    return 
        <div>这是用class关键字声明类创建的组件</div>             
    }         
}         
ReactDOM.render(
    <div>                 
    <HelloWorld3/>             
    </div>,             
    document.getElementById("app")         
) </script>

1.如果向组件内传值

- 组件内直接使用 this.props.变量名
- 使用组件的地方, 直接用变量名=传值

组件内使用:

<p>子组件接收到的值是:  --- {this.props.myTitle}</p> 传值 <MyTr myTitle={'你好啊'} />

组件嵌套使用: 其实就是在组件内直接使用另外一个组件

class HelloOne extends React.Component{         
    render () {             
        return <div>我是组件HelloOne</div>         
    }     
}     
class Home extends React.Component{         
render () {             
    return <div>                 
        <p>使用一个子组件</p>                
        <HelloOne />             
    </div>         
    }     
}

动态style


<p style={{color: 'red'}}>我是动态的style</p> 
<p style={{color: "yellow", backgroundColor: "blue"}}>如果多对用逗号隔开</p>

// 最外层的大括号: 代表这里是JS的代码
// 内层的大括号: 代表这是CSS样式的对象

React学习笔记（一）

简介