React 基础学习

Vue和React 中的遍历添加的key值

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 作用 : key值存在确保了唯一性, 可以用于dom的重新渲染和就地复用；
2. 区别 : 没有key值,检查到dom节点时,会对内容进行清空并且重新赋新值, 包含key值,会对之前的值

React 像vue的if else 判断的使用方法

1. 使用三目判断

	<div>
	     {this.state.isTest?
	     <span>isTest为true展示</span> // 这一块可放置'字符串',也可放置'标签对'
	     :
	     <span>isTest为false展示</span> // 这一块可放置'字符串',也可放置'标签对'
	     }
	 </div>

2. 使用方法接受返回值,在使用方法

        Message(){
            if(this.state.isTest){
                return(
                    <span>isTest为true展示</span> // 这一块可放置'字符串',也可放置'标签对'
                )
            }else{
                 return(
                    <span>isTest为false展示</span> // 这一块可放置'字符串',也可放置'标签对'
                )
            }
        }
        render(){
            return(
                <div>
                    {this.Message()}
                </div>
            );
        }

3. 使用变量接收,在使用变量

 render(){
            let MessageMessageMessage
            if(this.state.isTest){
                Message = (
                    <span>isTest为true展示</span> // 这一块可放置'字符串',也可放置'标签对'
                )
            }else{
                  Message = (
                    <span>isTest为false展示</span> // 这一块可放置'字符串',也可放置'标签对'
                )
            }
            return(
                <div>
                    {Message}
                </div>
            );
        }

列表循环渲染

1. 使用方法

	  arrayFn=()=>{
        return(
            this.state.array.map((item)=>{
                return(
                    <div key={item.toString()}>{item}</div> // key不添加 会提示错误
                )
            })
        )
    }
     return (
        <div>{this.arrayFn()}</div>
    )

2. 通过变量接收

	  render() {
	    const Marray = this.state.numbers.map((numbers) => {
	        return (
	            <li key={numbers.toString()}>{numbers}</li>
	        )
	    })
    return (
        <div className="Child">
            <ul>
                {Marray}
            </ul>
    )
}

React中的 ref 用法

用法一: 直接在标签和是哪个绑定ref值 ,通过this.refs获取使用即可

1. 缺点 :严格模式下会报错,；
2. 解决办法 : 注释根节点的严格模式 <React.StrictMode></React.StrictMode>

用法二:

1. 通过react使用createRef属性；
2. 通过createRef绑定ref的使用名称
3. 标签上使用的ref={自定义名称}

React路由的使用

1. npm install react-router-dom 创建路由npm;
2. 新建路由封装js模块(src/router/index.js)

 // 配置路由
        import React, {Component} from "react";
        // 路由依赖
        import {BrowserRouter, NavLink, Redirect, Route, Switch} from "react-router-dom";
        // 组件页面
        import Home from '../Home/Home'
        import JumpTestPageOne from '../component/jump_test_page_one'
        import JumpTestPageSecond from '../component/jump_test_page_second'
                                    ..
                                    ..
                                    等等
        // 组件数组
        const routerList = [
            {path: "/Home", exact: false, component: Home, title: "Home"},
            {path: "/JumpTestPageOne", exact: false, component: JumpTestPageOne, title: "JumpTestPageOne"},
            {path: "/JumpTestPageSecond", exact: false, component: JumpTestPageSecond, title: "JumpTestPageSecond"},
                                    ..
                                    ..
                                     等等
        ];
        
        class RouteConfig extends Component {
            render() {
                return (
                    <BrowserRouter>
                        <div className="NavLink">
                            {routerList.map((item, index) => {
                                return (
                                    <NavLink
                                             key={index}
                                             to={item.path}
                                    >{item.title}</NavLink>
                                );
                            })}
                        </div>
                        <Switch>
                            {routerList.map((item, index) => {
                                return (
                                    <Route
                                        key={index}
                                        path={item.path}
                                        exact={item.exact}
                                        component={item.component}
                                    />
                                );
                            })}
                            {/*默认初始化页面*/}
                            <Redirect from="/" to="/home" exact/>
                        </Switch>
                    </BrowserRouter>
                );
            }
        }
       export default RouteConfig;

3. 根目录下引入router/index.js

        import React from 'react';
        import ReactDOM from 'react-dom';
        import './index.css';
        import Route from "./router";
        ReactDOM.render(
            <Route></Route>,
            document.getElementById('root')
        );

React 组件通讯

1. 父组件传递子组件(传递值)
   （1）在父组件中调用子组件的时候，在子组件标签上定义一个属性（）
   （2）子组件调试使用该传递过来的值使用this.props.msg

• 父组件传递子组件(传递方法)
  （1）在父组件中调用子组件的时候，在子组件标签上定义一个属性（）
  （2）子组件调试使用该传递过来的值使用this.props.方法名调用
  
• 子组件传递父组件:
  （1）子组件使用相同的属性设置绑定事件方法，使用this.props.自定义属性（传递值）
  

react生命周期

• 组件挂载之前触发 ： componentWillMount
• 组件挂载完成时触发 ： componentDidMount(可做数据请求,拉取数据)
• 组件接收到新属性,或者组件状态值发生改变触发：shouldComponentUpdate 使用时必须要有返回值true或者false,不然代码报错
• 组件传递过来的值改变时触发 ：componentWillUpdate
• 组件数据更新完成时触发 ：componentDidUpdate
• 组件销毁时触发 ：componentWillUnmount
• 子组件props的值发生改变是触发 ：componentWillReceiveProps(nextProps) => 可以监听父组件流向子组件的值主动改变,也可以监听子组件修改父组件流向子组件的值
• 详细解读请参考React官网