react

Day1

创建项目：create-react-app xxx

 

组件:

// 两个 快捷键方式 ：

// rfce 后期都用函数组件 生成函数格式

// rce 前期用的是class类的形式  

 

定义组件的三步骤：

// 1、引入react

// 2、定义组件

// 3、导出组件

 

组件：

类组件

class App extends React.Component{

render(){  // render里边有return返回值

    // return null

    // return "111"

    return (

      <div></div>

     )

  }

 

 

函数组件

function App(params){

  return <div>函数组件</div>

}

 

React(jsx)中基础语法:

className   Style

常规文本、(常规渲染使用 { }单花括号)

条件渲染、

循环渲染、（利用map返回新数组）

{

arr.map(v=>{

             需要key值

             return <div key={v.id}>{v.id}===={v.name}</div>

              })

}

 

 

透明标签<></>（React.Fragment）、

 

事件绑定(例如onClick = {})   定义方法使用箭头函数，改变this指向

 

进行组件刷新：

1. props数据更新 == vue中props
2. State数据更新  ≈ vue中data  

(state类型如果是引用类型（数组、对象、函数）必须先进行浅拷贝，最好可以深 拷贝（immutable）完成更新)

1. 手动刷新 (this.forceUpdate() 方法可以强制组件手动更新)

修改state：this.setState（）

单向数据流的方式

 

 

Es6属于静态导入

除了 public中图片等等，其他都在src子目录

 

 

Day  

// dom操作  非受控方式

// value+state  受控方式

 

ref 概念及使用：

// 引用（Refs）提供了一个获得DOM节点或者创建在render方法中的React元素的方法

  userInpRef = React.createRef()

componentDidMount(){   生命周期

    let name = this.userInpRef.current  元素

    name.style.color='red'  更改

  }

 

生命周期

三期：挂载    更新      卸载

                      |        |        |

           实例期、存在期、销毁期