react第一天学习笔记

1.js定义变量的方式const,var,let的区别
　　1)const:定义的变量不能变再次赋值,但数组可以添加,对象能改变对应的属性值,但不能替换对象,而且必须要进行初始化
　　2)var:定义的变量可以修改,也可以不初始化,默认输出undefined
　　3)let:let是块级作用域,函数内部使用let定义后,对函数外部无影响,只在当前块中有效

2.es6规定,如果在区块中存在let和const命令,这个区块对这些命令申明的变量,从一开始就形成了封闭作用域,在声明之前就使用这些变量会报错

3.在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”

4.当在同步for循环里执行异步回调函数时,每次for循环的执行都是一个独立的块作用域,用let申明的块作用域变量,在每个块作用域都有对应的值且不变

5.es6中的var会产生变量申明提升的效果

6.jsx语法就是JavaScriptxml语法,如果需要在html中嵌套js语句即加大括号即可

7.箭头函数是函数组件实现的一种方法
　　//函数组件
　　const app = (props) => {
　　　　return <h1>hello world{props.title}</h1>
　　}

　　const creactApp = app({
　　　　title : "10086"
　　})

5.然后类组件则为:(类组件主要是为了方便)
//这样的表达方式是jsx语法,但不是合法的js,如果不是react编译成以下的方式,在浏览器是不能够运行的
　　class App extends Component{
　　　　render(){
　　　　　　return(
　　　　　　　　<div className="root" id="idRoot">
　　　　　　　　　　<h1>类组件{this.props.title}</h1>
　　　　　　　　　　<p id='pRoot'>类组件渲染</p>
　　　　　　　　</div>
　　　　　　)
　　　}
　　}

　　ReactDOM.render(
　　　　<App title="王耀聪写的"></App>,
　　　　document.querySelector('#root')
　　);

6.jsx原理简介:
//react编译成的合法js格式
React.createElement(标签,属性,子元素);
这个前两个参数是固定的,后面参数个数不固定.为子元素扩展,这个方法为了创建元素
　　class App1 extends Component{
　　　　render(){
　　　　　　return (
　　　　　　　　React.createElement(
　　　　　　　　　　'div',
　　　　　　　　　　{
　　　　　　　　　　　　'className':'root',
　　　　　　　　　　　　'id':'idRoot'
　　　　　　　　　　},
　　　　　　　　　　React.createElement(
　　　　　　　　　　　　'h1',
　　　　　　　　　　　　null,
　　　　　　　　　　　　'原始类组件'
　　　　　　　　　　),
　　　　　　　　　　React.createElement(
　　　　　　　　　　　　'p',
　　　　　　　　　　　　{
　　　　　　　　　　　　　　'id':'pRoot'
　　　　　　　　　　　　},
　　　　　　　　　　　　'原始类组件渲染'
　　　　　　　　　　),
　　　　　　　　)
　　　　　　)
　　　　}
　　}