React基础整理

前言:

    休了两个月的假期,手头上的知识有点遗漏很多了,赶着在入职前复习一轮,正好把之前的东西做一个完整的归纳。【PS:所有的笔记都可能在日后做更新补充】

=============================================================================================

一、搭建一个React环境基础【由于是在一台新的电脑上搭建全新的环境,所以所有的安装都走一遍】:

(1) 电脑上有Node环境【下载安装环境:https://nodejs.org/en/】

(2)安装相应的编译器(个人用VsCode,可根据个人喜好进行不同编译器下载配置)【下载地址:https://code.visualstudio.com/download】

(3)cmd切换到工作文档目录(有Git控制软件可直接在文档目录下右击进入)

(4)命令行方法建立环境:

           npm install -g create-react-app

           create-react-app my-app

           cd my-app

           npm start

   在浏览器中出现REACT的图表及HelloWorld则说明环境搭建成功

   注意:VsCode是有终端集成环境的可以用VS打开相应的目录环境后点击到终端进行相应第四步的操作,本质相同。

二、复习一下React的基础知识吧:

1. React的核心概念有:①Component②JSX③ref④props⑤state

2.基础知识:

(1)方法-- ReactDOM.render(要渲染的元素,渲染指定的容器)

举例:  ReactDOM.render(

Hello React

,document.getElementById('example'))

(2)babel--babel是js编译器,将es6\jsx等 转换为浏览器能识别的语法

转换之前:ReactDOM.render(

Hello React

,document.getElementById('example'))

转换之后: ReactDOM.render(

            React.createElement('h1',null,"Hello React"),

            document.getElementById('example')

            )

(3)jsx(javaScriptXML)

什么是jsx? jsx并不是一种新的语法,只不过是允许在js中编写标签!

JSX中的语法:

①如果遇到<,首字母小写就会使用html来解析,首字母是大写,让React按照组件来解析

②如果遇到{,就会使用js来解析

注意事项:

1.react中,是不允许直接返回多个标签,可以放在一个顶层标签中!

2.{/* 这是一个注释 */}

GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_01.html&Demo_02.html为基础练习

3. Component 组件【组件是一个可被反复使用的,带有特定功能的视图】

(1)React中组件的创建和使用

    创建:

            var Hello = React.createClass({

                render:function(){

                    return 渲染的模板内容

                }

            })

        使用:

           

    注意事项

        ①组件类的名称 要符合全驼峰命名方式(首字母全大写)

        ②在render方法中返回要渲染的元素时,不允许直接换行

        ③不允许在组件类中直接渲染多个元素,但是可以放在一个容器中

        ④所有的元素在调用时必须有结束标记

参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_03.html

(2)复合组件---允许在一个组件中调用其它的组件

参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_04.html

4.Props 属性(properties)

4.1 在React中 通过props属性来实现父与子的通信

实现步骤:
            ①传值
                
            ②接收
                MyHello的组件中接收:
                    this.props.myname

参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_05.html

4.2 事件绑定:onEvent={this.handleEvent}
        举例:
            

参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_06.html

注意: props对象中的值是只读的!无法直接修改通过属性传来的值

4.3 this.props.children
        props对象中的属性和调用该组件时传递的属性是一一对应的!
        但是有一个比较特殊:this.props.children
        如果组件内的元素是一个 , object
        是多个,array
        没有 空

        React.Children.map(
                                                 this.props.children,
                                                 function(value,key){
                                                     return

  • {value}
  • ;
                                                     }
                            ) 

    参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_07.html

    4.4 props实现方法的传递
    三步骤:     1、定义方法
                            login:function(){
                                console.log(‘login success’);
                            }
                        2、将方法传递给组件
                            
                        3、通过props对象调用方法
                            在MyButton中
                                this.props.myfunc();

    参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_08.html

    4.5 props传递方法是为了实现子与父的通信

    React 传递一个带有参数的方法
                ①在父组件中定义方法
                    rcvMsg:function(msg){

                    }
                ②调用子组件时传方法    
                    
                ③在子组件内部调用方法
                    this.props.myFunc(123)

    5.Ref(reference 引用/参考)

        
        通过ref得到所指定的组件的实例或者元素: this.refs.mySon

    参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_09.html

    每日小知识:

    1.安装cnpm方法:npm install -g cnpm --registry=https://registry.npm.taobao.org

    2. sublime text 安装插件方法:sublime textà安装package control=>pre=>emmet=>html-css-js prettify=>spacegray模板

    【今天的笔记先做到这里啦,有关的练习代码在gitHub(https://github.com/CrystalAngelLee/ReactBasis)上陆续奉上,笔记也会每天更新的----来自Crystal2018年7月30日打卡总结】

    6.state

      React把组件比作是一个状态机器,组件中的数据通过状态来进行管理。

      组件视图的变化   本质都是数据的变化,将这个数据的变化通过状态来呈现出来。 

    (1)状态的3个基本操作:

    初始化: getInitialState:function(){
                         return {
                              switch:true,
                              myValue:1
                          }
                    }

    读状态:this.state.switch

    写状态:this.setState(
                      {switch:false},
                      function(){
                          //当状态设置成功之后的回调函数
                       }
                  );

    (2)状态的功能:
            ① 状态是用来管理数据
            ② 状态中数据 是可以 绑定 到视图中

    注意:①当组件中状态发生变化时,组件是会被重新渲染的
               ②不允许在render方法中 设置状态 setState(maximum stack size exceeded)
       

    参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_11.html
    7.组件生命周期 

    组件中的生命周期可以分为3个阶段——mount update unmount
    在对应的阶段 有着自己的处理函数
    componentWillMount
    componentDidMount

    componentWillUpdate
    componentDidUpdate

    componentWillUnmount

    注意事项:
         1、ref的使用必须要在componentDidMount之后才可以
         2、update
               当state、props发生变化时,会执行和update相关的处理函数。
               和update相关的处理函数 是有参数的,每个处理都有两个参数,分别对应的是props\state

    参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_12.html&Demo_13.html

    8.表单组件的处理方式

    受控的表单元素——value   checked   selected(不受个人控制的元素,受了React的控制)

    解决方案:
         方案1:
            将受控表单元素 转换为 非受控表单元素
            value --> defaultValue

         方案2:
            给受控表单元素做个处理
                ①初始化一个状态
                ②将状态的值 绑定到 表单元素的 value/checked/selected
                ③在表单元素绑定对应的事件和对应的处理函数
                    onChange
                    handleChange:function(){
                        //修改状态中的值
                        this.setState({})
                    }

    参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_14.html

    日常小知识:

    1.收一个yarn安装一直报错的解决网址:http://www.voidcn.com/article/p-yrikahtp-bos.html

    2.如何在配置VScode同步代码到GitHub中:

    1. 配置环境变量
    2. 打开目录集成终端初始化仓库

        参考站点:https://www.jianshu.com/p/e9dd2849cfb0

    【以上来自Crystal的2018年7月31日打卡总结】

    收一些学习react 的相关站点:

    1、https://www.w3cplus.com/

    你可能感兴趣的:(CrystalのReact学习,前端,React)