天道酬勤,学无止境

React基础一

目录

  • react相关说明
    • react不能像Vue一样直接在浏览器运行
    • React的快速构建工具
    • 通过CRA来构建项目
      • 构建流程
      • 常见问题
  • react元素与组件
    • React元素
    • 函数式组件
    • 类组件
    • 辅助工具
  • 组件的传参和接参
  • 组件的组合和嵌套
    • 组件的组合
    • 组件的嵌套
    • 在子组件中显示父组件中子组件书写的内容
  • jsx原理【 了解 】
  • 组件中的DOM样式
  • React的数据定义问题
    • 属性
    • 状态
  • 属性props验证
  • jsx里面的注释
  • 属性vs状态
    • 相同点
    • 不同点
    • state
    • props
    • 使用场景
    • 总结
  • 状态提升
  • 状态组件

说明

React中使用的是 es6 模块化规范 (即import引入,exports default导出)

  1. React是不能直接在浏览器中运行的,我们必须借助工具才能运行React程序
    • 因为React是jsx,它必须经过webpack编译为js才能运行
  2. React的快速构建工具
    • 脚手架作用:快速构建一个项目
    • 类型
      • CRA [ 大纲要求 - react官方推荐的 ]
      • Dva
      • Umi
  3. 通过CRA来构建项目
  • 构建流程
    • 安装CRA [ create-react-app ]
      • 全局安装
        • yarn add create-react-app global
        • cnpm i create-react-app -g
      • 临时使用 [ npx ]
        • npx create-react-app 项目名称
    • 安装需要等待一段时间,这个过程实际上会安装三个东西
      • react: react的顶级库
      • react-dom: 因为react有很多的运行环境,比如app端的react-native, 我们要在web上运行就使用react-dom
      • react-scripts: 包含运行和打包react应用程序的所有脚本及配置
      • 出现下面的界面,表示创建项目成功:
      Success! Created your-app at /dir/your-app
      Inside that directory, you can run several commands:
      
        npm start      //  开发环境下运行
          Starts the development server.
      
        npm run build  // 生产环境打包
          Bundles the app into static files for production.
      
        npm test       // 测试环境下运行
          Starts the test runner.
      
        npm run eject  // 配置文件抽离,这个操作是不可逆的【 抽离的就不能返回 】
        	// webpack配置放在了node_modules/react-scripts里面
          Removes this tool and copies build dependencies, configuration files
          and scripts into the app directory. If you do this, you can’t go back!
      
      We suggest that you begin by typing:
      
        cd your-app
        npm start
      
      Happy hacking!
      
    • 启动项目
      • $ yarn start
      • 启动项目出错可能原因
      • 可能配置文件抽离少了,手动安装没有抽离出来的配置
    • 打包项目
      • $ yarn build
    • 配置文件抽离
      • $ yarn eject 这个动作不可逆【 不能返回 】
    • 启动项目后,会生成项目的目录结构如下:
    ├── README.md							使用方法的文档
    ├── node_modules					所有的依赖安装的目录
    ├── yarn-lock.json			锁定安装时的包的版本号,保证团队的依赖能保证一致。
    ├── package.json					 项目依赖配置记录文件 、 记录项目脚本命令
    ├── public								   静态公共目录( 生产环境 ) 不会被webpack编译
    |-- config                   项目webpack配置文件
    |-- scripts                  项目wepback脚本命令执行文件
    └── src									开发用的源代码目录
    	- index.js 项目入口文件
    	- index.css 项目全局样式
    	- App.js 构建了一个App组件,是项目最大的组件 【 类似根组件 】
    	- App.css 是App组件的样式文件
    	- App.test.js 是App组件测试文件 
    	- logo.svg 初始项目的界面logo
    	- serverWorker 内部文件,我们不操作 
    
    • 常见问题:
    • npm安装失败
      • 切换为npm镜像为淘宝镜像
      • 使用yarn,如果本来使用yarn还要失败,还得把yarn的源切换到国内
        yarn config set registry https://registry.npm.taobao.org // 配置yarn镜像源
        
        yarn config list // 查看yarn 镜像列表
        
      • 如果还没有办法解决,请删除node_modules及yarn-lock.json然后重新执行cnpm install命令
      • 再不能解决就删除node_modules及yarn-lock.json的同时清除npm缓存npm cache clean --force之后再执行npm install命令
      • 环境变量问题
      • react-scripts 版本过高问题 ( 降低版本 react-script@2.1.8)
    • 以上全不行,咋整?
      • 将旁边可以安装的人的目录文件拷贝过来,注意不要拷贝node_modules
        • 拷贝过来之后,记得cnpm i

react元素与组件

  1. React元素
    • 概念
    • React元素就是一个普通的jsx(虚拟DOM对象模型)
    • 实现代码
     /* 
         * 项目入口文件 - 整个项目的灵魂
     */
     import React from 'react'//React的顶级库,它里面有很多的React的api,并且我们要想使用jsx,那么必须引入它,它是对jsx的支持
     import ReactDOM from 'react-dom'//它的作用就是将React组件编译为DOM结构,然后插入到浏览器网页中
     
     // ReactDOM.render( 元素/组件, 一个已有的容器 )
     //此代码的作用:用ReactDOM里面的render方法将React组件解析为DOM结构,然后再插入到root结构里面
     ReactDOM.render(
         <h3> React元素 </h3>,//在js中书写html,react元素
         document.querySelector('#root')//获取已有容器
     )
    
  2. 函数式组件
    • 概念:就是定义一个函数,将函数以标签化的形式使用
    • 函数式组件的推导过程
    • 将要用的html结构定义成一个变量
      import React from 'react'
      import ReactDOM from 'react-dom'
      
      const ele = <h3> 函数式组件 </h3>
      
      ReactDOM.render(
        ele,
        document.querySelector('#root')
      )
      
    • 由于元素没有办法传递参数,所以我们就需要把之前定义的变量改为一个方法,让这个方法去return一个元素:
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 特别注意这里的写法,如果要在JSX里写js表达式(只能是表达式,不能流程控制),就需要加 {},包括注释也是一样,并且可以多层嵌套
    const app = (props) => <h1>欢迎进入{props.name}的世界</h1>
    
    ReactDOM.render(
      app({
        name: 'react'
      }),
      document.getElementById('root')
    )
    
    • 这里我们定义的方法实际上也是react定义组件的第一种方式-定义函数式组件,这也是无状态组件。但是这种写法不符合react的jsx的风格,更好的方式是使用以下方式进行改造
    • 函数式组件(组件名称必须大写,否则会报错)
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    const App = ( props ) => {//这样,我们的内容就可以灵活多遍了
      //props参数会接受App组件身上的属性
      return <h3> { props.info } </h3>//React模板语法{}
    }
    
    ReactDOM.render(
      // App({
      //   info:'传参'
      // }),
      <App info = '标签化形式'/>,//改成标签化形式,更符合组件的思维
      document.querySelector('#root')
    )
    
    • React模板语法
      • 单括号{}
    • 在React中,函数也可以是一个组件,但是记住了,这个函数必须返回一个jsx结构
    • 函数式组件由一个属性props接收, 这个props可以接收绑定在函数式组件身上的属性
    • 好处:
      • js的最大特点: 函数式编程
      • react符合函数式编程思想的
      • 函数的好处: 复用性高、独立作用域
  3. React第二类组件: 类组件
    • 实现代码
    //index.js文件
    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
    ReactDOM.render(
      //传参
      <App info = '这是类组件参数'/>,
      document.querySelector('#root')
    )
    
    
    //引入React、父组件Component、唯一根元素Fragment
    import React,{ Component,Fragment } from 'react'
    
    //创建类组件
    class App extends Component{
        render () {
            //jsx结构 一定要有唯一根元素
            return (
                //Fragment唯一根元素,在解析时不会有任何展示,不会渲染
                <Fragment>
                    <h3> 类组件 </h3>
                    //通过this.props.info来接收绑定在App组件身上的参数
                    <h3> info:{ this.props.info } </h3>
                </Fragment>
            )
        }
    }
    //导出类组件
    export default App
    
    • 其中render是一个函数,return后面跟括号
    • es6 class组件其实就是一个构造器,每次使用组件都相当于在实例化组件
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component {
      render () {
        return (
      		<h1>欢迎进入{this.props.name}的世界</h1>
      	)
      }
    }
    
    const app = new App({
      name: 'react'
    }).render()
    
    ReactDOM.render(
      app,
      document.getElementById('root')
    )
    
  4. 辅助工具
    • vs code 插件
      • Simple React Snippets
      • ES7 React/Redux/GraphQL/React-Native snippets
      • React-Native/React/Redux snippets for es6/es7
    • chrome浏览器
      • React developer tools

创建类组件更老的一种方法

  • 在16以前的版本还支持这样创建组件, 但现在的项目基本上不用
  • 实现代码
// react  15.x
React.createClass({
  render () {
    return (
      <div>{this.props.xxx}</div>
  	)
  }
})

组件的传参和接参

  • 类组件
    • 传参
    <App info = '这是类组件参数'/>
    
    • 接参
     <h3> info:{ this.props.info } </h3>
    
  • 函数式组件
    • 传参
    <FnComp name = '张三'></FnComp>
    
    • 接参
    //通过props.name来接收
    import React,{ Component } from 'react'
    const FnComp = props => {
        // console.log( this ) undefined  
        return (
            <Fragment>
                //使用props.name来接收,函数式组件中没有this
                <h3> { props.name } </h3>
            </Fragment>
        )
    }
    export default FnComp
    

    注意:函数式组件里面的this是undefined,而类组件里面的this就是当前组件App

组件的组合和嵌套

  • 组件的组合
    • 概念
      • 将一个组件写在另一个组件的内容中,然后在外层组件中通过 this.props.children来接收内容中的组件,包括里面的内容
    • 代码实现
    //1.App组件
    import React,{ Component,Fragment } from 'react'
    import Father from './components/Father'
    import Girl from './components/Girl'
    class App extends Component {
        render () {
            return (
                <Fragment>
                    <h3> info:{ this.props.info } </h3>
                    //组件的组合
                    <Father>
                        <Girl></Girl>
                    </Father>
                </Fragment>
            )
        }
    }
    export default App
    //2.Father组件
    import React,{ Component,Fragment } from 'react'
    class Father extends Component{
        render () {
            return (
                <Fragment>
                    { this.props.children }
                </Fragment>
            )
        }
    }
    export default Father
    //3.Girl组件
    import React,{ Component,Fragment } from 'react'
    const Girl = props => {
        return (
            <Fragment>
                Gril
            </Fragment>
        )
    }
    export default Girl
    
  • 组件的嵌套【 更推荐 】
    • 概念
      • 将子组件在父组件的jsx中以标签的形式使用
    • 实现代码
    //1.父组件
    import React,{ Component,Fragment } from 'react'
    import Son from './Son'
    class Father extends Component{
        render () {
            return (
                <Fragment>
                    <h3> 这是父组件 </h3>
                    <h3> 引入子组件 </h3>
                    <Son name = '张三'>
                        {/* 在子组件中书写{ this.props.children }来显示这里的内容 */}
                        <p> 显示子组件的内容 </p>
                    </Son>
                </Fragment>
            )
        }
    }
    export default Father
    
    //2.子组件
    import React,{ Component,Fragment } from 'react'
    class Son extends Component{
        render () {
            return (
                <Fragment>
                    <h3> 子组件 </h3>
                    //接收在父组件中子组件身上绑定的属性
                    <p> { this.props.name } </p>
                </Fragment>
            )
        }
    }
    export default Son
    //3.父组件中引入Father组件
    
  • 在子组件中显示父组件中子组件书写的内容
//1.父组件中子组件中书写内容
 <Son name = '张三'>
    {/* 在子组件中书写{ this.props.children }来显示这里的内容 */}
    <p> 显示子组件的内容 </p>
 </Son>
 
 //2.显示在父组件中书写的子组件内容
 { this.props.children }

jsx原理

  • 概念:javascript语法扩展(js+xml)
  • React中通过React.createElement()将jsx编译为js对象模型
  • jsx解决的问题
    • 方便我们在js中写html结构
  • 编译的过程把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构
    • 源代码
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component {
      render () {
        return (
          <div className='app' id='appRoot'>
            <h1 className='title'>欢迎进入React的世界</h1>
            <p>
              React.js 是一个构建页面 UI 的库
            </p>
          </div>
        )
      }
    }
    
    ReactDOM.render(
    	<App />,
      document.getElementById('root')
    )
    
    • 编译后
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component {
      render () {
        return (
            React.createElement(
            "div",
            {
              className: 'app',
              id: 'appRoot'
            },
            React.createElement(
              "h1",
              { className: 'title' },
              "欢迎进入React的世界"
            ),
            React.createElement(
              "p",
              null,
              "React.js 是一个构建页面 UI 的库"
            )
          )
        )
      }
    }
    
    ReactDOM.render(
    	React.createElement(App),
      document.getElementById('root')
    )
    
    • React.createElement 会构建一个 JavaScript 对象来描述你 HTML 结构的信息,包括标签名、属性、还有子元素等, 语法为
    React.createElement(
      type,
      [props],
      [...children]
    )
    

    JSX — 使用react构造组件,babel进行编译—> 将JavaScript对象 — 通过ReactDOM.render()—>渲染成DOM元素 —>插入页面

组件中的DOM样式

  • 分类(四种)
    • 行内样式
    • 使用class
    • 不同条件添加不同样式
    • css-in-js
  • 行内样式
    • 实现方式
      • 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现:
        • 定义样式对象的三种方式
          • 直接在标签内定义
          • 在return外面定义
          • 在render外面定义(实例属性)
          //这里第一个{}代表语法模板;第二个{}代表一个对象
          import React,{ Component,Fragment } from 'react'
          
          class StyleOne extends Component {
              styleDemo3 = {//实例属性
                  text:{ width:'100px',height:'100px',background:'blue' }
              };
              render () {
                  const styleDemo2 = {
                      text:{ width:'100px',height:'100px',background:'red' }
                  };
                  return (
                      <Fragment>
                          <h3> 行内样式 </h3>
                          {/* 方式一:直接在标签内定义样式对象 */}
                          <p style = {{ width:'100px',height:'100px',background:'green' }} > 行内样式 </p>
                          {/* 方式二:在return外面定义样式对象 */}
                          <p style = { styleDemo2.text }></p>
                          {/* 方式三:在render外面定义样式对象 */}
                          <p style = { this.styleDemo3.text }></p>
                      </Fragment>
                  )
              }
          }
          
          export default StyleOne
          
  • 加类名
    • 实现方式
    import React,{ Component,Fragment } from 'react'
    //模块化引入样式文件
    import './Style_demo2_css.css'
    
    class StyleTwo extends Component{
        render () {
            return (
                <Fragment>
                    <h3> 样式添加---类名 </h3>
                    <p className = "size bg"> 类名添加样式 </p>
                </Fragment>
            )
        }
    }
    
    export default StyleTwo
    

    注意:这里要使用className来添加类名,不能使用class添加类名,因为class是关键字

  • React中使用sass
    • 要安装两个包
    yarn add node-sass
    yarn add sass-loader
    
    • scss样式文件
    $color: pink;
    
    .size{
      width: 100px;
      height: 100px;
    
    }
    .bg{
      background: $color;
    }
    
    • 模块化引入
    import './CompTwo.scss'
    
  • React中使用less
  • 不同条件添加不同样式
    • 安装(要是安装失败就换一个方式安装)
    yarn add classname/classnames
    
    • 在npmjs中找classname的用法
    classname({
        one: true,
        two: false,
        three: true
    })
    
    • 实现代码
    //引入classname
    import classname from 'classname'
    
    //classname是一个函数,里面参数是一个对象,通过开关来控制类名是否添加
     <Fragment>
        <h3> React样式添加 - 不同的条件添加不同的样式 </h3>
        <p className = {classname({
          size: true,
          success: false,
          danger: true
        })}></p>
     </Fragment>
    
  • 样式组件
    • 安装
    cnpm i styled-components -D
    
    • styled-components是针对React写的一套css-in-js框架,简单来讲就是在js中写css
    • 实现代码
    //引入style-components
    import styled from 'styled-components'
    
    /*在Container中写样式
    const Container = styled.标签名`
        这里面写样式
    `*/
    
    const Container = styled.div`
      width: 200px;
      height: 200px;
      border: 1px dashed black;
      header{
        width: 50px;
        height: 50px;
        background: ${ props => props.flag && 'purple' || 'red' };
        i{
          display: block;
          width: 25px;
          height: 25px;
          <!--在组件Container组件身上绑定一个样式属性时,可以在styled.div中用过props来接收属性-->
          background: ${ props => props.color };
        }
      }
    `
    
      <Fragment>
        <h3> React样式添加 - 样式组件 </h3>
        <Container color = "green" flag = { false }>
          <header> 头部 <i></i></header>
        </Container>
      </Fragment>
    

React的数据定义形式

  • React中属性的定义
    • 属性的概念:属性是描述性质、特点的,属性不能被组件自己更改,但是你可以通过父组件主动重新渲染的方式来传入新的 props
    • 外部传入
      • 实现:在组件的标签化形式中绑定一个属性,然后在组件中通过this.props.属性名【或者peops.属性名】接收
      • 代码实现
      //1.PropsDemo组件
      import React,{ Component,Fragment } from 'react'
      
      class PropsDemo extends Component{
          render () {
              return (
                  <Fragment>
                      <h3> 属性的定义---外部引入 </h3>
                      {/* 接收绑定在PropsDemo组件身上的属性 */}
                      <p> { this.props.name } </p>
                  </Fragment>
              )
          }
      }
      
      export default PropsDemo
      
      //App组件
      import React,{ Component,Fragment } from 'react'
      import PropsDemo from './components/PropsDemo'
      
      class App extends Component {
          render () {
              const name = '外部引入'
              return (
                  <Fragment>
                      <PropsDemo name = { name }></PropsDemo>
                  </Fragment>
              )
          }
      }
      
      export default App
      
    • 内部定义
      • 实现:通过static关键字结合defaultProps来定义,在组件中依然通过{ this.props.属性名 }接收
      • 代码实现
      import React,{ Component,Fragment } from 'react'
      
      class PropsDemo extends Component{
          //内部定义--通过static关键字
          static defaultProps = {
              age:100
          }
          render () {
              return (
                  <Fragment>
                      <h3> 属性定义---内部定义 </h3>
                      <p> { this.props.age } </p>
                  </Fragment>
              )
          }
      }
      
      export default PropsDemo
      

注意:React中的属性是不可变的,内部设置的属性是不去更改它的

  • React中状态的定义
    • 概念:
      • 状态就是组件描述某种显示情况的数据,由组件自己设置和更改,也就是说由组件自己维护。
    • 使用目的
      • 为了在不同的状态下使组件的显示不同(自己管理)
    • 定义方式
      • 实例属性形式:利用state直接定义,然后利用{ this.state.info }接收
      import React,{ Component,Fragment } from 'react'
      
      class StateDemo extends Component {
          //利用state直接定义
          state = {
              info:'状态定义---直接定义'
          }
          render () {
              return (
                  <Fragment>
                      <h3> 状态定义---直接利用stata定义 </h3>
                      //通过{ this.state.info }接收
                      <p> { this.state.info } </p>
                  </Fragment>
              )
          }
      }
      
      export default StateDemo
      
      • 在构造函数里面定义,然后利用{ this.state.info }接收【 推荐 】
      class StateDemo extends Component {
          //定义方式二:在构造函数里面定义
          constructor () {
              super()
              this.state = {
                  info:'状态定义---在构造函数里面定义'
              }
          }
          render () {
              return (
                  <Fragment>
                      <h3> 状态定义---直接利用stata定义 </h3>
                      <p> { this.state.info } </p>
                  </Fragment>
                  )
              }
          }
      
      export default StateDemo
      

注意:组件自己的状态更改

属性props验证

  • 作用:让写组件的人可以给组件的props设定参数检查
  • 安装检测工具
cnpm i prop-types -S
  • 实现代码
import propsTypes from 'prop-types'

    <Fragment>
        <h3> 属性验证 </h3>
        {/* 外部引入price属性 */}
        <p> { this.props.price + 1000 } </p>
    </Fragment>

    // 属性验证
    /*
        import propsTypes from 'prop-types'
        类.propTypes = {
            属性:引入的prop-types.限定类型
        }
    */
    
    PropsCheck.propTypes = {
        //规定传入的属性的属性值只能是数字类型,其他类型会报错
        price:propsTypes.number
    }
    
    //报错的信息
    index.js:1375 Warning: Failed prop type: Invalid prop `price` of type `string` supplied to `PropsCheck`, expected `number`.
    in PropsCheck (at App.js:11)
    in App (at src/index.js:8)

jsx里面的注释

{/* jsx里面的注释 */}

属性vs状态

  • 相似点:都是纯js对象,都会触发render更新,都具有确定性(状态/属性相同,结果相同)

外部传入属性,内部修改状态,都会触发render更新

  • 不同点
    1. 属性能从父组件获取,状态不能
    2. 属性可以由父组件修改,状态不能,组件自己的状态自己更改
    3. 属性能在内部设置默认值,状态也可以
    4. 属性不在组件内部修改,状态要改 【 外部传入的属性只能外部修改,内部定义的属性不允许修改】
    5. 属性能设置子组件初始值,状态不可以【设置子组件初始值:通过static defaultProps】
    6. 属性可以修改子组件的值,状态不可以
  • state
    • 作用
      • state 的主要作用是用于组件保存、控制、修改自己的可变状态
    • 状态的修改
      • state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新,setState 会导致组件的重新渲染。
  • props
    • 作用
      • **props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件**
    • 修改
      • 它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的 props,否则组件的 props 永远保持不变。
  • 使用场景
    • 规则:尽量少地用 state,多用 props。【数据最好是由外传入内】

总结:组件props要想变,那么就外部修改;组件state要想变,那么组件内部自身通过setState修改

状态提升

  • 如果有多个组件共享一个数据,把这个数据放到共同的父级组件中来管理

状态组件

  • 无状态组件
    • 概念:没有state组件
    • 举例:函数式组件
  • 有状态组件
    • 概念:有state组件
    • 举例:类组件
  • 使用场景
    • 功能复杂,我们使用类组件
    • 功能单一,我们使用函数式组件

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • React基础(一)之基础介绍及搭建项目
    主要内容 1.基础内容介绍2.环境搭建3.脚手架安装及创建第一个react项目4.初始化项目介绍 一、react基础介绍 1、参考网址: 英文官网: https://reactjs.org/ 中文官网: https://doc.react-china.org/ 2.介绍描述 用于构建用户界面的 JavaScript 库(只关注于View)ReactJS是由Facebook在2013年5月推出的一款JS前端开源框架,推出式主打特点式函数式编程风格。react三大体系 react三大体系 3、react的特点 Declarative(声明式编码)Component-Based(组件化编码)Learn Once, Write Anywhere(支持客户端与服务器渲染)高效单向数据流 4.react高效的原因 虚拟(virtual)DOM, 不总是直接操作DOMDOM Diff算法, 最小化页面重绘 5.react与vue的对比 react与vue异同对比之处:https://blog.csdn.net/HZHJC/article/details/95043142 相同之处:两者均采用虚拟Dom(virtual Dom)- 用Js模拟DOM结构,DOM变化的对比,放在Js层,以提高重绘性能不同之处: react与vue不同之处 React.js相对于Vue.js它的灵活性和协作性更好一点
  • react-native 从0开始 ( 基础知识 一 )
    react-native 基础知识 1.Hello World2. Props(属性)2.1 绑定属性2.2 组件复用 3. State(状态) 1.Hello World 【 Hello World 】 延续悠久的历史传统,以 Hello word作为开篇 import React from 'react'; import { Text, View } from 'react-native'; const HelloWorldApp = () => { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> <Text>Hello, world!</Text> </View> ) } export default HelloWorldApp; 可以看到,在代码中使用了<View/>、 <Text/>,作用就是用来替代web的<div/>和<span/>标签 View常用作其他组件的容器,来帮助控制布局和样式。 2. Props(属性) 【 Props(属性)】 2.1 绑定属性 import React from 'react'; import { Image } from 'react-native'; const Bananas = () => { let pic
  • react基础到实战-尚硅谷(学习笔记一)
    身为一只react小白,最近在找react的学习资料,在b站上搜到一套react的学习视频,感觉非常的详细,给大家分享一下我的学习笔记。并附上这套视频的学习地址 链接:https://www.bilibili.com/video/BV184411x7F9 第一章 入门 基本认识React特点React高效的原因 基本使用步骤 JSX虚拟DOMJSX渲染虚拟DOM(元素)动态展示列表数据 模块与组件和模块化与组件化的理解js模块组件模块化组件化 基本认识 React特点 Declarative(声明式编码)Component-Based(组件化编码)Learn Once,Write Anywhere(支持客户端与服务器渲染)高效单向数据流 React高效的原因 虚拟DOM,不总直接操作DOMDOM Diff 算法,最小化页面重绘 react使用了虚拟DOM渲染和DOM Diff算法,这两样有效的减少了前端对DOM的操作,也降低了局部刷新的次数。 基本使用 在测试React时,会引用以下的几种js: react.development.js:是开发版 react.production.js:是压缩版 babel.js:用来把es6转es5,解析JXS语法代码转为纯JS语法代码的库 react-dom.js:提供操作DOM的react扩展库 步骤 创建虚拟DOM元素对象 var vDom
  • 1.React基础
    1.什么是React? React 是一个用户构建用户界面的JavaScript库。 用户界面:HTML页面(前端) React主要用来写HTML页面,或构建web应用 如果从MVC 的角度来看,React 仅仅是视图层(v),也就是只负责视图的渲染,而并非提供了完整的M 和C 的功能。 起源于Facebook的内部项目,后又用来架设Instagram的网站,并于2013年5月开源 2.React的特点 声明式 只需要描述UI(HTML)看起来是什么样,就跟写HTML 一样 React 负责渲染UI,并在数据变化时更新UI const jsx = <div className = 'app'> <h1>Hello React! 动态变化数据:{count}</h1> </div> 基于组件 组件是React最重要的内容 组件表示页面中的部分内容 组合,复用多个组件,可以实现完整的页面功能 学习一次,随处使用 使用React可以开发web应用 使用React可以开发移动端原生应用(react-native) 使用React可以开发VR(虚拟现实)应用(react 360) 3.React的安装 安装命令:npm i react react-dom react包是核心,提供创建元素,组件等功能 react-dom包提供DOM相关功能等 4.React的使用 //A
  • 前端学习路线
    文章目录 前端模板下载Html+cssHtml+css 基础教程Html+css 实战教程 JQueryJQuery视频教程 JavaScriptJavaScript基础教程JavaScript实战教程 AjaxAjax教程 BootStrapBootStrap基础教程BootStrap实战教程BootStrap模板BootStrap文档教程 LayUiLayUi教程 ES6ES6基础教程 EchartsEcharts基础教程Echarts实战教程 百度地图学习AngularAngular教程 Node.jsNode.js基础教程Node.js实战教程 React(推荐的视频有可能一样,但是要有没有资料)React基础教程React实战教程 WebpackWebpack教程 AxiosAxios教程 Vue(重中之重)Vue基础教程Vue实战教程 APP开发APP开发教程 微信小程序开发微信小程序基础教程微信小程序实战教程 微信公众号开发微信公众号开发教程 项目实战 推荐学习1 推荐学习2 推荐学习3 前端模板下载 https://www.mycodes.net/search.php?keyword=%D7%A2%B2%E1 滑动的登录注册页面 HTML5实例推荐 Html+css Html+css 基础教程 网页高级编程(青鸾云) HTML+CSS 基础入门教程全套视频 |
  • react学习笔记一react基础概念及基本使用
    1. React入门 1.1. React的基本认识 1). Facebook开源的一个js库 2). 一个用来动态构建用户界面的js库 3). React的特点 Declarative(声明式编码) Component-Based(组件化编码) Learn Once, Write Anywhere(支持客户端与服务器渲染) 高效 单向数据流 4). React高效的原因 虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数) 高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域) 1.2. React的基本使用 (1).导入相关js库文件(react.js, react-dom.js, babel.min.js) 可到bootcdn 官网下载 (2)例:第一个react代码:hello world! <body> <div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js
  • 2018上半年掘金微信群日报优质文章合集:前端篇
    在掘金微信交流群里的小伙伴们,你们每天都还在坚持读小报吗?如果你的回答是yes,那真的要给你点一万个赞了?能坚持这么久,真的很优秀噢!(嗯,每天坚持给大家收集文章的小饼也很优秀?)2018不知不觉已经过了一半了,这里是上半年的小报优质文章合集,做了一些简单分类,希望对大家有用! 编程语言相关 JavaScript 如何在疲劳的JS世界中持续学习 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 几道JS代码手写题以及JavaScript数据结构与算法资源分享 JavaScript:面试频繁出现的几个易错点 JavaScript 运行原理解析 TypeScript 实践分享 理解Underscore中的去抖函数 html2image原理简述 深入JavaScript继承原理 Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A 规范) 我们需要注意的 immutable 操作 身份证号码的正则表达式及验证详解(JavaScript,Regex) 前端模块化:CommonJS,AMD,CMD,ES6 简单快速理解js中的this、call和apply ES6 的几个小技巧 面试官:请你实现一个深克隆 ES6会这些就够了 入门babel--实现一个es6的class转换器 JavaScript 装饰器极速指南 学会了ES6,就不会写出那样的代码
  • 历时将月,七厂同约,终入字节--应届小前端的破局之路
    历时将月,七厂同约,终入字节--应届小前端的破局之路 自我介绍为什么离职跳槽前该考虑的事技术方面该如何准备js方向css方向源码方向数据结构和算法方向计算机网络方向浏览器方向其他方向 面经58同城一面58同城二面百度一面百度二面百度三面抖音一面抖音二面抖音三面猿辅导一面猿辅导二面猿辅导三面猿辅导hr面快手一面快手二面快手三面美团一面(部门A)美团二面(部门A)美团一面(部门B)美团二面(部门B)去哪儿网一面去哪儿网二面 致谢相关链接 自我介绍 双非二本,软件工程,自学前端,今年毕业。 喜欢编程,古风,日语和英语。 常以冷月心之名混迹前端江湖,也曾在混迹网文圈时用冷月心做笔名签约掌阅,作品《清起风云》,百度可查。 求职期间写了一个小博客,感兴趣的可以看看 https://lengyuexin.github.io/gatsby 为什么离职 这个问题,几乎我参加的每一场面试都会问到。我是2020.7.1毕业,最后离职日期是2020.12.18。这段工作经历很短,被问到也很正常。最主要原因还是追求更大的发展空间和技术突破。 在我导师跳槽去美团后,团队内就出现了明显的技术断层。我遇到的某些问题,能够与之商量的同事也越来越少。至于源码,数据结构和算法层面的交流就更少了。 而这些深层次的东西,才是真正意义上的技术栈,是真真正正能提高个人技术能力和核心竞争力的东西。 跳槽前该考虑的事 在我看来
  • 关于前端学习路线的一些建议(内含经典自测题)
    虽然这篇文章花了很长时间,肯定也有其局限性;希望各位不吝指出。 入题 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是 CSS & HTML & JavaScript 了。但这三大件一直都是前端的根本,这一点从未改变。而这三大件中 JavaScript 又是重中之重。 接下来我会结合我的一点经验,给出前端学习路线的一些具体建议。 目录 三大件学习 库工具 前端框架( MVVM )的学习 浏览器 & 计算机基础 前端工程化 性能优化 Nodejs 数据结构和算法 依葫芦画瓢 三大件学习 现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。 刚入门的朋友,我觉得不应该一开始就学习像 Vue、TypeScript、Webpack 等知识。应该把重点放在 CSS & HTML & JavaScript 基础知识的学习上。 CSS & HTML 对于刚入门的朋友我依旧建议先将 CSS(3) & HTML(5) 的知识点认真学习一边。学习的途中最好是学习完一部分就自己在敲一遍代码,加深自己的记忆。 当然如果你愿意,建议你可以先仿一个网站的静态页面(掘金、知乎等都可以),有一些属性就可以了解他实际的实现场景。 当然刚开始敲代码的时候还是不要过分依赖自动补全功能
  • React 基础面试题(二) 贼细+答案
    这些是我平时翻阅+面试遇到的面试题,可能会不全,但还会继续补充!!!!!! 1、 什么是React? React 是 Facebook 在 2011 年开发的前端 JavaScript 库。它遵循基于组件的方法,有助于构建可重用的UI组件。它用于开发复杂和交互式的 Web 和移动 UI。尽管它仅在 2015 年开源,但有一个很大的支持社区。 2、 React有什么特点? 1、生命式设计:react采用声明范式。 2、高效:react通过对DOM的模拟,最大限度减少DOM交互。 3、灵活:react可与已知的库和框架很好的配合。 4、JSX:JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 5、组件:通过react构建组件,使得代码更加容易得到复用,能够很好应用在大项目开发中。 6、单向页面的数据流:react实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。 3、 列出React的一些主要优点。 它提高了应用的性能可以方便地在客户端和服务器端使用由于 JSX,代码的可读性很好React 很容易与 Meteor,Angular 等其他框架集成使用React,编写UI测试用例变得非常容易 4、 React有哪些限制? React的限制如下: React 只是一个库,而不是一个完整的框架它的库非常庞大
  • (精华2020年5月24日更新) react基础篇 react-router-dom的基本使用
    首先安装 npm i react-router-dom 到index.js中加入如下代码 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import {HashRouter,BrowserRouter} from 'react-router-dom' ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter> , document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); 使用方式 import
  • react学习笔记一:基础知识
    react开发辅助工具 chrome扩展包 1、React Devtools:检视React组件树形结构:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi 2、Redux Devtools:检视Redux数据流:https://chrome.google. com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibtkpmmfibljd 3、React Perf:发现React组件渲染的性能问题:https://google.com/webstore/detail/react-perf/hacmcodfllhbnekmghgdlplbdnahrnhmm 如果访问谷歌浏览商店哟困难,可以访问http://chrome-extension-downloader.com/,在输入框输入上面连接最后面的字符串,点击下载扩展包按钮即可 1、组件生命周期: 组件生命周期分为三个阶段: 创建过程(挂载) 更新过程 卸载过程 了解:每个阶段执行时机;每个阶段钩子函数执行顺序 创建过程 执行时机:页面加载时(组件创建时) 钩子函数执行顺序也按照书写顺序 constructor:触发时机-创建组件时最先执行
  • React Native 一站式开发解决方案
    分享一个RN快速开发库:react-native-easy-app 。一款为React Native App开发提供基础服务的纯JS库(支持 IOS & Android),可以为开发者开发项目提供强有力的支持,可以大幅度提高编码的效率,特别是在项目搭建初期,至少可以为开发者减少30%的工作量。 由于前面的文章已经做过介绍,在这里就不详细介绍了,通过本开源库,你可以有以下“高级的操作”: 可以像访问内存对象一样访问AsyncStorage相关文章:一分钟实现,一个RN持久数据管理器;react-native-easy-app 详解与使用之(一) AsyncStorage 只需要几十行代码就能实现,一个完整的app与服务器的Http请求交互相关文章:二十分钟封装,一个App前后台Http交互的实现;react-native-easy-app 详解与使用之(二) fetch 一行配置 + 基础组件的使用就即可以实现,UI自动屏幕适配相关文章:详解与使用之(三) View,Text,Image,Flatlist;react-native-easy-app 详解与使用之(四)屏幕适配 另附有多个不同版本的Demo供大家参考用法:SampleSample_MobxSample_Redux 以下为Sample_Redux示例程序的UI部分截图: 开源库中也有详细的 README 说明文档,如下图
  • 移动动态化方案在蜂鸟的架构演进(含React Native与Weex对比)
    当下,移动动态化已经成为各大公司都回避不了的问题,产品的快速迭代对技术提出了更高的要求,而移动端的动态化方案也是层出不穷:Hypid、结构化 Native View、React Native、Weex,什么样的方案才是适合自己团队的呢?本文将分享饿了么蜂鸟团队在过去两年多业务快速增长过程中,移动动态化方面的实践和探索。什么是移动动态化?移动指的是移动端,包括安卓、iOS。动态化则是动态部署和逻辑下发到客户端的能力。移动动态最好的状态就是让移动应用和 Web 一样,想发就发!为什么移动端要强调动态化的能力?原因有如下三大点: 业务迭代太快。当下大部分团队都是敏捷开发的模式,即使两周做一次迭代,产品周期还是会觉得长,有些应用不能及时上线。 应用市场审核慢。安卓基本当天发应用市场,当天就能够有更新。但 iOS 需要约 3-4 天来审核。假设有些功能需要定时上线,iOS 审核时间必须要考虑进去。 用户升级周期长。统计表明,每一个安卓版本发布,一周内会有 70% 的用户更新,一个月其余用户才能陆续完成更新。移动动态化方案共性,有如下三点: 跨平台。 布局。约定 DSL,保证渲染性能。 逻辑。Android 和 iOS 必须共用解释器。蜂鸟团队的现状与业务特点蜂鸟团队现状蜂鸟团队于 2014 年成立,初衷是为了承接饿了么的物流业务。随着时间推移,订单量从每日几千单到百万单,配速员也达到百万数量
  • React-Native基础知识总结
    第三章 React-native - 基础 React Native 介绍文件目录结构JSXRN样式基本标签插值表达式调试事件生命周期mobx React Native 介绍 文件目录结构 │ App.js --- 项目的根组件 │ index.js --- 项目的入口文件 │ package.json --- 项目的描述文件 │ .eslintrc.js --- eslint的配置文件 │ .prettierrc.js --- 格式化配置文件 │ android --- 编译安卓相关 │ ios --- 编译ios相关 JSX React中写组件的代码格式 全称是 JavaScript xml import React from 'react'; import { View, Text } from 'react-native'; const Index = () => <View> <Text>JSX</Text> </View> export default Index; RN样式 主要讲解和web开发的不同之处 flex布局样式继承单位屏幕宽度和高度变换 flex布局 所有容器默认都是flexbox并且是纵向排列 也就是 flex-direction:column 样式继承 背景颜色、字体颜色、字体大小等没有继承 单位 不能加 px 单位不能加 vw vh
  • 掘金站内 webpack 优秀文章汇总
    本文使用 juejin-spider 生成 👍 点赞数,📌 标签 (1)[👍 2667][📌 JavaScript][腾讯IVWEB团队] webpack详解(2)[👍 2196][📌 CSS][chenhongdong] webpack4-用之初体验,一起敲它十一遍(3)[👍 1726][📌 前端][尼古拉斯李三] 妈妈再也不用担心我不会webpack了(4)[👍 1705][📌 Node.js][jerryOnlyZRJ] Webpack揭秘——走向高阶前端的必经之路(5)[👍 1500][📌 Webpack][蚂蚁金服数据体验技术] Webpack 4 配置最佳实践(6)[👍 1471][📌 JavaScript][yck] webpack:从入门到真实项目配置(7)[👍 1286][📌 CSS][hello等风来] 手写一个webpack4.0配置(8)[👍 1108][📌 React.js][张不怂] webpack4 的30个步骤打造优化到极致的 react 开发环境,如约而至(9)[👍 932][📌 JavaScript][张不怂] 关于webpack4的14个知识点,童叟无欺(10)[👍 904][📌 JavaScript][百命] 脑阔疼的webpack按需加载(11)[👍 866][📌 Webpack][心谭] 📚免费的渐进式教程
  • 2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
    2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 【导读】:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(DaiMaGe3)之前也是从新手过来的,很能理解web前端新手的难处,为了更好的帮助大家自学好web前端开发,我把自己精心梳理的web自学资料、心得及完整的web前端学习路线,统统都分享出来,希望对有需要的朋友有所帮助! 【大纲】: 1.为什么要学web前端开发? 2.哪些人可以学web前端开发? 3.自学web前端开发有什么收获? 4.怎么高效学习web前端开发? 5.自学web前端课程有哪些实战项目+案例? 6.整套web前端课程部分视频+源码+笔记切图。 【正文】: 为什么要学web前端开发? 主要原因好就业,薪资不错 备:随着移动互联网的深入发展,多屏互动和多端兼容友好的界面成为目前系统重要的需求,让前端开发工程师一跃成为目前市场紧俏的人才。 2、专业无限制:计算机专业、非计算机专业占比3:4 3、适合零基础:专业、性别不限,没有基础也能学习 4、技术上手快:4个月,快速学习、系统掌握 5、职业生涯稳:软件项目都需要前端开发,it在,前端在 二、哪些人可以学web前端开发? 1.在校大学生 2.刚刚毕业的技术小白 3.零基础想转行的非在职it人员 4.有基础想转行的在职IT人员
  • 2021 年版本 React & React Hook & React Router 基础入门实战视频教程(10 个视频)
    2021 年版本 React & React Hook & React Router 基础入门实战视频教程(10 个视频) 2021 年到来,React 已更新到 17.0.0 版本,我们这套课程跟进最新版本,来入门并学习 React,学习 React Hook 和 React Router,从零开始实战一个全新项目,是国内最新的关于 React 的视频教程 React & React Hook & React Router 基础入门实战视频教程 01 介绍 React & React Hook & React Router 基础入门实战视频教程 02 创建 React 项目并了解项目源码 React & React Hook & React Router 基础入门实战视频教程 03 组件与模板 React & React Hook & React Router 基础入门实战视频教程 04 模板上的动态值 React & React Hook & React Router 基础入门实战视频教程 05 多个组件 React & React Hook & React Router 基础入门实战视频教程 06 添加样式 React & React Hook & React Router 基础入门实战视频教程 07 事件 React & React Hook & React Router
  • react hooks 指南
    1.以下对react hooks 描述? react要解决的问题是状态共享,状态指的是状态逻辑和数据处理逻辑 使用hooks更容易将组件的ui与状态分离 多个状态不会产生嵌套,写法是平铺的 写法上有限制,不能出现在条件、循环中 useEffect第二个参数不写,任何方法都触发useEffect useEffect第二个参数是一个数组,表示以什么state和props来执行副作用 useEffect中定义的副作用函数的执行不会阻塞浏览器更新视图,也就是说这些函数是异步执行的。而componentDidMount或componentDidUpdate中的代码则是同步执行的 useEffect 依赖的数组如果是空,React首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数。 React16 Hooks lazy. memo. fiber class. functional. hoc(高阶组件) Render-props 1、状态逻辑复用差 ? render-peops 、hoc 嵌套逻辑特别冗余 2、复杂组件难以理解 3、class类组件,this不好维护,class编译之后的代码太多。热重载的时候会有不稳定情况。 class继承和我们es5继承有什么不一样?? Hooks API: useEffect 、 useState、 useReducer
  • JS系列:js节点
    节点(node) 在html文档中出现的所有东西都是节点 元素节点(HTML标签)文本节点(文字内容)注释节点(注释内容)文档节点(document)… 每一种类型的节点都会有一些属性区分自己的特征与特性 nodeType: 节点类型nodeName:节点名称nodeValue:节点值 元素节点 nodeType:1 nodeName:“DIV” //大写的标签名 nodeValue:null //节点值 文本节点 nodeType:3 nodeName:‘text’ nodeValue:文本内容 注释节点 nodeType:8 nodeName:‘#comment’ nodeValue:注释内容 文档节点 nodeType:9 nodeName:‘#document’ nodeValue:null ###描述节点关系之间的属性 parentNode 获取当前节点唯一的父亲节点 childNodes 获取当前元素的所有子节点 子节点:只获取儿子级别的所有:含元素节点,文本节点 children 获取当前元素所有的元素子节点 在ie6-8把元素节点也当做元素节点获取到,所有兼容性不好 previousSibling 获取当前节点的上一个哥哥节点(可能是元素或者文本等) previousElementSibling 获取当前节点的上一个哥哥元素节点(不兼容ie6-8)