React注意事项

今天药忘吃喽~ 2023-03-12 09:26 10阅读 0赞

# React注意事项 #

> 1.  在`jsx`中 写注释\*\*：推荐使用`{ /* 这是注释 */ }`\*\*
> 2.  为`jsx`中的元素添加class类名
>     
>      *  使用`className` 来替代 `class`；
>      *  `htmlFor`替换label的`for`属性
> 3.  在`JSX`创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
> 4.  在`jsx`语法中，标签必须 成对出现，如果是单标签，则必须自闭和！
> 5.  当 编译引擎，在编译`JSX代码`的时候，如果遇到了`<`那么就把它当作 HTML代码去编译，如果遇到了 `{}` 就把 花括号内部的代码当作 普通`JS`代码去编译；
> 6.  React中创建组件(组件的名称首字母必须是大写)
> 7.  ###### 不论是 class 还是 普通的function创建的组件，它们的props都是只读的 ######
> 8.  在 render 函数中不能使用 `setState`
> 
> `setState`会触发 render 函数的执行，如果在 render 函数中，又调用了`setState`，则会进入死循环！

## 使用普通的 `style` 样式 ##

> ###### 注意：在 `JSX`语法中，如果想写 行内样式了，不能 为style 设置 字符串的值 ######
> 
> ###### 而是应该 `style={ {color: 'red', fontWeight: 200} }` ######
> 
> ###### 在行内样式中，如果是 数值类型的样式；则可以不用引号包裹； ######
> 
> ###### 如果是字符串类型的样式值，必须用 引号包裹 ######

## React 中绑定事件的注意点 ##

> 注意：
> 
>  *  事件的名称都是React的提供的，因此名称的首字母必须大写`onClick`、`onMouseOver`
>  *  onClick 只接受 function 作为处理函数；而箭头函数本身就是一个匿名的 function 函数
>  *  在React中，如果想要修改 state 中的数据，推荐使用 `this.setState({ })`
>  *  在 setState ，只会把对应的state状态更新，而不会覆盖其他的state状态
>     
>      *  this.setState 方法的执行，是异步的；如果大家在 调用完 this.setState 之后，有想立即拿到最新的state值，需要使用 `this.setState({ },function(){ })`
>  *  绑定文本框与state中的值（单向数据流）
> 
> 1.  在 Vue 中，默认提供了`v-model`指令，可以很方便的实现 `数据的双向绑定`；
> 2.  但是，在 React 中，默认只是`单向数据流`，也就是 只能把 state 上的数据绑定到 页面，无法把 页面中数据的变化，自动同步回 state ； 如果需要把 页面上数据的变化，保存到 state，则需要程序员手动监听`onChange`事件，拿到最新的数据，手动调用`this.setState({ })` 更改回去
> 
>  *  使用ref获取DOM元素引用
> 
> 1.  和 Vue 中差不多，vue 为页面上的元素提供了 `ref` 的属性，如果想要获取 元素引用，
> 
> 则需要使用`this.$refs.引用名称`
> 
> 1.  在 React 中，也有 `ref`, 如果要获取元素的引用`this.refs.引用名称`
> 
>     <input
>     onChange={ this.inputChange.bind(this)}
>     ref={ (input) => {  this.input = input }}
>        ></input>
>     
>     // 输入框
>     inputChange(e) { 
>         this.setState({ 
>             inputValue: this.input.value
>         })
>     }

在components / 新建 bindEvent.jsx 文件

import React from 'react'
    
    export default class bindEvent extends React.Component {
        constructor(){
           super()
           
           // 组件私有数据
           this.state = {
               msg: '哈哈'
           }
       }
     
        render(){	
            return <div>
            <button onClick={this.say}></button>
            <button onClick={ () => this.say() }>按钮</button>
            <button onClick={ () => this.show('传参') }>按钮</button>
            <input type="text" style={
       { width: '100%' }} value={this.state.msg} onChange={() => this.textChanged(e)} ref="mytxt" />
            </div>
        }
        
        // 实例方法
        say(){
            console.log('ok')
        }
        // 事件的处理函数
        show(arg1) {
            console.log('show方法' + arg1)
            this.setState({
                msg: '哈哈被修改了' + arg1
            },function(){
                console.log('最新的msg值：' + this.state.msg)
            })
        }
        // 响应 文本框 内容改变的处理函数
        textChange(e) {
            console.log(e.target.value)
            console.log(this.refs.mytxt.value);
            this.setState({
                msg: this.refs.mytxt.value
            })
        }
        
    }

> 在 index.js页面中

import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 导入组件
    import bindEvent from '@/components/bindEvent'
    
    ReactDOM.render(<div>
        <bindEvent></bindEvent>
    </div>, document.getElementById('app'))