React 学习笔记（一）

1、一个最简单的react组件的结构

---

第一步：导入包

import React from 'react'  //react -->创建组件、虚拟dom元素、生命周期
import ReactDOM from 'react-dom'  //react-dom --> 把创建好的组件和虚拟dom放到页面上展示

第二步：创建虚拟DOM元素

参数一：创建元素的类型，字符串，表示元素的名称
参数二：是一个对象或者 null，表示当前dom的属性
参数三：子节点（包括 其他 虚拟DOM 获取 文本子节点）
参数N : 其他子节点

const myh1 = React.createElement('h1',{id:'myh1',title:'this is my h1'},'jiangtong')

const mydiv = React.createElement('div',null,'这是一个div元素',myh1)

渲染页面上dom元素的最好方式就是写html代码即 jsx 语法：

const mytest = 
我的div
 //会被Babel转义为 React.createElement()调用

第三步：使用ReactDom 把虚拟dom渲染到页面上

参数一： 要渲染的那个dom元素
参数二: 指定放到页面的哪个容器上，需要是一个dom元素，而不是选择器

ReactDOM.render(mydiv,document.getElementById('app'))

2、jsx语法

---

JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

JSX 中可以嵌入表达式：

const name ='jiangtong'
const myh1 = 
my name is,{name}
ReactDOM.render(myh1,document.getElementById('app'))

JSX 也是一个表达式：

function getGreeting(user) {
  if (user) {
    return 
Hello, {formatName(user)}!
;
  }
  return 
Hello, Stranger.
;
}

其它 ：
在jsx控制区域内，需要写js代码，则把他放入{}
在jsx里面写注释 { /* ... */ }
为jsx中的元素添加class类名： 需要用className 来代替 class
在jsx 创建dom的时候，所有的节点，必须由唯一的根元素进行包裹

3、react 创建组件的两种方式

---

方法一：使用构造函数的方式创建组件

function Hello(props) { 
    // return null  表明此组件什么都不渲染
    return 
这是h1 renturn 的组件---{props.name}-{props.age}-{props.gender}
  }
const dog ={
    name:'大黄',
    age:'3',
    gender:'男'
}
ReactDOM.render(

    这是我的 div 盒子
    
,document.getElementById('app'))

小总结:

• 因为是构造函数，首字母要大写
• 在组件中必须返回一个jsx虚拟dom 元素
• props里面的属性是只读的 ！！，不可以被重新赋值
• 组件抽离要使用 export default xxx 将其暴露

方法二：使用 class 创建组件

class Movie extends React.Component {
    constructor(){
        super()
        this.state = { // this.state 的数据是可读可写的
            msg:'大家好啊，我是可读可写的 ！'
        } // 相当于 Vue里面的 data(){return{}}
    }

    render(){  //// render ----渲染当前组件对应的 虚拟dom元素
        // this.props.name = 'lisi' 不可，是ready only属性
        this.state.msg = 'msg的值被我修改了啊'
        return 

            
这是Movie组件-{this.props.name}-{this.props.age}
            
{this.state.msg}
        
    }
}

const user ={
    name:'jt',
    age:22,
    gender:'女'
}
ReactDOM.render(

    123  
     
,document.getElementById('app'))

小总结：

• super() 其实是父类中 constructor 构造器的一个引用（固定写法）
• 子类中独有的 this 只能写到super下面

两种方式的区别：
1、使用class 关键字创建的组件，有自己的私有数据和生命周期。使用 构造函数创建的组件，只有props，没有自己的私有数据和生命周期
2、用class 创建的组件叫有状态组件，用构造函数创建的组件-----叫无状态组件

有无状态组件的本质区别： 有无state 属性和有无生命周期函数

4、props 和 state

---

props：

function Hello(props){
    // Wrong------->props.name = 'zhangsan'
    return 
hello world  +  {props.name}
}
React.render(
    ,
    document.getElementById('app')
)

• 构造函数创建的组件使用 props 传递参数

this.props：

class Hello extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return 
hello + {this.props.name} 
    }
}

• 在class类创建的组件里面，如果我们要传递参数，要使用 this.props ，同时，必须在constructor以及super里面显式地传递入我们的props。

总结：

• props 是只读的 ！！！
• 数据是向下流的，父组件通过props把他的data 传给子组件。
• props不需要我们定义，这个是react里面就存在的一个东西，专门用来存放我们的要传递的参数的
• this.props和props其实是一样性质的，只是在不同的地方有不同的用法。

state：

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: 'hello world ！',
    }
  }
   render() {
    return 
      
{ this.state.msg }
   }
}

• state 是可读可写的 ！！！
• state是私有的数据对象，只会存在class类创建的组件里面。
• 不能直接修改 State，要使用 setState({ key : value })。
• State 的更新可能是异步的，当需要依赖当前状态来改变下一个状态时，可以让 setState() 接收一个函数而不是一个对象。
• 调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。

---