React学习笔记（2）

古城微笑少年丶 2024-04-17 05:57 75阅读 0赞

### 1.  React 事件处理 ###

(1) react 事件绑定属性的命名采用驼峰式写法；   如果采用JSX的语法你需要传入一个函数作为事件处理函数；

如： <button onClick=\{handleClick\} >按钮</button>

(2) react 必须要用使用 preventDefault  方式去阻止默认行为。

### 2.  Keys  ###

Keys 可以在DOM中的某些元素被增加或者删除的时候帮react 识别哪些元素发生了变化，因此你应当给数组中的每一个元素赋予一个确定的标识。  通常，使用来自数据的id 作为 元素的key

const listItems = todos.map((todo) =>
      <li key={todo.id}>
        {todo.text}
      </li>
    );

注意点：

（1）元素的keys 只有在它和它的兄弟节点对比时才有意义；

（2）元素的key 在它的兄弟元素之间应该唯一；

（3）当在map() 方法的内部调用元素时， 最后为每一个元素加上key；

### 3. React 组件API ###

（1）setstate :     设置状态；    （2） replace:   替换状态；

（3） setProps：  设置属性；    （4）  replaceProps:   替换属性；

（5）  forceUpdate:  强制更新；  （6）  findDOMNode:  获取DOM节点；

（7）  isMounted:   判断组件挂载状态；

setState ：  设置状态

setState(object nextState[, function callback])

参数说明：

（1） nextState, 将要设置的新状态， 该状态会和当前的state 合并；

（2） callback,  可选参数， 回调函数， 该函数会在setState 设置成功，且组件重新渲染后调用；

注意：

不能在组件内部通过this.state 修改状态， 因为该状态会在调用setState() 后被替换； setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

### 4.  React 组件生命周期 ###

组件的生命周期可分成三个状态：

（1） Mounting:  已插入真实DOM；

（2） Updating:   正在被重新渲染；

（3）  Unmounting：  已移除真实DOM；

生命周期方法的例子：

class App extends Component {
        constructor() {
            console.log('constructor 1');
            super();
            this.state = {
                num: 1
            };
        }
     
        UNSAFE_componentWillMount() {
            //官方不推荐在此发请求， 原因可能是造成渲染的阻塞
            console.log('componentWillMount 2');
        }
        componentDidMount() {    // 数据已经装载
            // 实际应用发网络请求
            console.log('componentDidMount 4');
        }
        UNSAFE_componentWillReceiveProps(){
            console.log('componentWillReceiveProps');
        }
        UNSAFE_componentWillUpdate() {
            console.log('componetWillUpdate 将要更新');
        }
        shouldComponentUpdate() {
            console.log('shouldComponentUpdate');
            return true;
        }
        componentDidUpdate() {
            console.log('componentDidUpdate');
        }
        render() {
            // 可以做渲染过滤
            console.log('render 3');
            return (
                <div>
                    {this.state.num}
                    <button onClick={e => this.setState({ num: 66 })}>更改数据</button>
                </div>
            );
        }
    
    }

点击按钮前：

![20190825112738268.png][]

点击按钮后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70][]

# React AJAX #

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。

当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

# React 表单与事件 #

在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

一般通过 value = \{this.state.date｝和 onChange 事件来监听 input 的变化，并修改state；

# React Refs #

React 支持一种非常特殊的属性 **Ref** ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

### 使用方法 ###

绑定一个 ref 属性到 render 的返回值上：

react教程学习地址：

（1） [https://www.runoob.com/react/react-tutorial.html][https_www.runoob.com_react_react-tutorial.html]   菜鸟教程；

（2） [http://www.ruanyifeng.com/blog/2015/03/react.html][http_www.ruanyifeng.com_blog_2015_03_react.html]  阮一峰的网络日志；

（3）[https://zh-hans.reactjs.org/tutorial/tutorial.html][https_zh-hans.reactjs.org_tutorial_tutorial.html]   官方文档教程；

[20190825112738268.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/1916898dc91b4a69ba6f97eaccaef3fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/df112b1eea1c45739273fa43409d376e.png
[https_www.runoob.com_react_react-tutorial.html]: https://www.runoob.com/react/react-tutorial.html
[http_www.ruanyifeng.com_blog_2015_03_react.html]: http://www.ruanyifeng.com/blog/2015/03/react.html
[https_zh-hans.reactjs.org_tutorial_tutorial.html]: https://zh-hans.reactjs.org/tutorial/tutorial.html