react笔记-g900859

第一阶段

react简单例子

引入cdn 关于 react ReactDOM babel
ReactDOM.render(dom,target,callback)
dom 不需要加引号，因为这个片段需要babel 也就是需要运行在`<script type="text/babel"><script>` 中
let APP1 = ReactDOM.createRoot(get('#app1'))  
let APP2 = ReactDOM.createRoot(get('#app2'))
可以选择根元素 可以有多个根元素,拿到之后，可以使用APP1.render() 用法和上边一样,一般一个应用程序只需要一个根

数据定义与函数绑定

react绑定变量可以通过 {} 单大括号进行 包括函数的绑定也是一样

绑定事件函数也是跟原生类似 onClick = {method}

//假设已经引入了React,ReactDOM和bebal
let msg = 'hello world!'
function changeMsg(){
 
    appRender()
}
let app = ReactDOM.createRoot(document.querySelector('#app'))
let appRender = () => app.render(<div><p>{msg}</p> <button onClick={changeMsg}>改变MSG</buttom></div>)
appRender()
//这里需要注意{}写在dom上 不需要引号
//changMsg传参还未提到

react 类-组件的写法

react中可以写一个类继承自 React.component,然后这个类内部可以写函数 方法 变量 然后再实现render方法 返回一个（dom）

 
class App extends React.Component{
    constructor(){
        //这里不要忘记调用下super哦，不然继承的那些变量方法无法使用
        super()
        this.state = {
            msg:'我是组件写法中的变量声明'
        }
        this.changeMsg = this.changeMsg.bind(this)
    }
    changeMsg(){
        请注意这个函数中的this在render函数渲染后默认指向的是undefined，因为是在严格模式下
        this.setState({
            msg:'我是组件写法修改后的变量'
        })
    }
    render(){
        return{
            <div>
            	<h1>{this.state.msg}</h1>
                <input name='button' type='button' value='修改数据' onClick={this.changMsg.bind(this)}/>
                //这里的bind(this)如果没写 那函数调用时的this将会时undefined
            </div>
        }
    }
    
}
ReactDOM.craeteRoot(document.querySelector('#app')).render(<App/>)
//这里就不需要重新调用render函数了 因为人家内部实现了 数据修改自动重新渲染
//=bind(this)如果没写 那函数调用时的this将会时undefined，也可使用箭头函数解决问题，也可在constructor中写

列表的展示方法

数组类型的放在dom中它会自己遍历 利用这个特性我们可以这样做

constructor(){
    this.state={
        movies: ['变形金刚', '王者归来', '指环王', '泡泡历险记']
    }
}
render(){
    return{
        <div>
            <ul>
                {this.state.movies.map((item,index)=><li key={item}>{item}</li>)}
                //这里会返回一个数组 数组元素都是dom ['<li>dom</li>','<li>dom</li>'],会被遍历
            </ul>
        </div>
    }
}

计数器案例

计数器案例可以复习前边所学

可以使用结构
   class Root extends React.Component {
      constructor() {
        super()
        this.state = {
          count: 0
        }
        console.log(this.increment);
        this.increment = this.increment.bind(this)
        this.decrement = this.decrement.bind(this)
      }
      increment(params) {
 
        //增加
        this.setState({
          count: this.state.count + 1
        })
      }
      decrement() {
 
        this.setState({
          count: this.state.count - 1
        })
      }
      render() {
        const { state: { count }, increment, decrement } = this
        return (
          <div>
            <h1>当前计数： {count}</h1>
            <button onClick={increment}>+++</button>
            <button onClick={decrement}>---</button>
          </div>
        )
      }
    }
    ReactDOM.createRoot(document.querySelector('#root')).render(<Root />)
 
 

JSX的注释与数据类型

{/**这就是注释**/} 在.jsx文件中 可以 'ctrl + /'
 
数据类型的展示中需要注意 object不可以直接展示，会报错；
要是想显示里边的内容 可以在{}中调方法； 例如： Object.keys(object)
null/undefined/true/false 不会显示 若要 请 toString
其他数据可以显示 数组的话会自动遍历 子元素规则同上
也可以使用表达式 isNaN ? 'ok':'no'
也可以抽成函数返回dom  （这里要说一下 直接调用是不需要绑定this的，因为它在自己的作用域中直接执行了）

react事件绑定 最优写法

<button onClick={(e) => this.decrement(e,999)}>其他写法</button>
//箭头函数写法 参数顺序和事件对象都没问题
 

react 属性绑定

直接写属性 值用大括号包裹变量 规则同js

react 条件渲染和列表渲染

//老规矩 假设基本框架代码已经存在
<h1>{isHidden.toString()} </h1> //因为布尔值 null undefined 在虚拟dom中显示空白
 
在逻辑代码中 可以使用短路语法 { isHidden || <h1>不隐藏</h1> }
                 
列表渲染也同理 可以使用高阶函数 并且利用数组的链式调用 完成一系列操作 
{ Moives.filter(item=>item.score>99).map(item=> (<h1>item.name</h1>)) }
                                                 
                                                 

注意事项

直接调用没有this指向问题，但赋给事件则会有 使用箭头函数调 顺便解决e的问题

第二阶段

react 脚手架

react的脚手架可以傻瓜式的生成一个react DEMO；

首先你要确保你安装了 react的脚手架 “ create-react-app 项目名称”

值得注意的是你需要确认你输入的没有大写字母 否则可能会出现意想不到的错误

第一个demo

流程与vue类似

//index.js
import ReactDOM  from "react-dom/client";
import App from './components/App'
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<App/>)
 
//app.jsx
import React from "react";
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      msg: '我爱react'
    }
  }
  changeMsg(e){
    console.log(e);
    this.setState({
      msg:'卧槽 你也配'
    })
  }
  render(){
    let {msg} = this.state
    return(
      <div>
        <h1>{msg}</h1>
        <button onClick={(e)=>this.changeMsg(e)}>修改值</button>
      </div>
 
    )
  }
}
export default App

渲染结果：