React入门到组件的三大核心

React简介官网1.英文官网: https://reactjs.org/2.中文官网: https://react.docschina.org/介绍描述1.用于动态构建用户界面的 JavaScript 库(只关注于视图)2.由Facebook开源React的特点1.声明式编码2.组件化编码3.React Native 编写原生应用4.高效（优秀的Diffing算法）React高效的原因1.使用虚

皮卡砖

514人浏览 · 2021-07-26 19:44:49

皮卡砖 · 2021-07-26 19:44:49 发布

React简介

官网

1.英文官网: https://reactjs.org/
2.中文官网: https://react.docschina.org/

介绍描述

1.用于动态构建用户界面的 JavaScript 库(只关注于视图)
2.由Facebook开源

React的特点

1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法）

React高效的原因

1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。

使用的方式

一 CDN 链接
在html内引入

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
// 配合jsx使用
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

二下载到本地引入
复制红色框内的连接在url地址栏打开全部复制到子自己创建的js文件内引入即可使用
在这里插入图片描述
三脚手架自带

jsx

1 定义虚拟DOM 不要使用引号
2 标签中混入表达式时要用 {}
3 样式的类名要用 className 不要用 class
4 内联样式要用 style={{color:‘red’}} 格式去写
5 只有一个根标签
6 标签必须闭合
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
7 标签首字母
1) 诺小写字母开头,则将该标签转为html中同名元素,诺html中无该标签对应同名元素,则去找组件是否有同名组件,无报错
2) 诺大写字母开头,react就去渲染对应的组件,诺组件没有定义,则报错
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代
JSX 允许在模板中插入数组，数组会自动展开所有成员

类式组件

  class B extends React.Component {
                render(){
                    return <h1>我是类式组件</h1>
                }
            }                                                                   ReactDOM.render(<B />,document.getElementById('app'))

类中直接可以写赋值语句
在这里插入图片描述

 class a {
    constructor(num){
      this.num = num
    }
      a = 1
    }
   let b =  new a(1)
  console.log(b)

简单组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      class Person extends React.Component {
          render(){
              // render 函数内有this实例化对象可以拿到props传递的值
            let  {name} = this.props
              return <h1>{name}</h1>
          }
      }
     
      ReactDOM.render(<Person name="张三" />,document.getElementById('app'))
    </script>
</body>
</html>

有状态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
        .unactive{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
     class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

    </script>
</body>
</html>

组件内三大核心

1 state
state 是组件对象最重要的一个属性,值是一个对象可以包含多个key-value的组合
组件被称为一个’状态机’,通过更新组件的state来更新对应的页面显示(重新渲染组件)
1)组件render方法种的this为组件实例对象
强烈注意
2)组件自定义的方法中this为undefined 如何解决? 一在构造器中改变this指向通过函数对象的bind() 二箭头函数必须写出赋值语句箭头函数那种特性三状态数据,不能直接修改或更新借助于 setState({})来更新
2 props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
        .unactive{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        class Person extends React.Component {
      
          render(){
              // render 函数内有this实例化对象可以拿到props传递的值
            let  {name} = this.props
              return <h1>{name}</h1>
          }
      }
      ReactDOM.render(<Person name="张三" />,document.getElementById('app'))
    </script>
</body>
</html>

对props进行限制标签属性类型默认值限制
1)引入 prop-types

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
    class Person extends React.Component {
        
          render(){
              // render 函数内有this实例化对象可以拿到props传递的值
            let  {name} = this.props
              return <h1>{name}</h1>
          }
      }
      Person.propTypes = { name:PropTypes.string.isRequired         sex:PropTypes..string           函数 : func }   //没简写必须在类外定义
      ReactDOM.render(<Person name="张三" />,document.getElementById('app'))
    </script>
</body>
</html>

添加默认值

Person.defaultProps = { sex:'男'}

简写

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
     class Person extends React.Component {
        static propTypes = { name:PropTypes.string.isRequired    // 简写到了类内部      sex:PropTypes..string           函数 : func }
          render(){
              // render 函数内有this实例化对象可以拿到props传递的值
            let  {name} = this.props
              return <h1>{name}</h1>
          }
      }
     
      ReactDOM.render(<Person name="张三" />,document.getElementById('app'))
</body>
</html>

ref
1.字符串形式的ref

2.回调形式的ref

3.createRef创建ref容器· (该容器是专人专用只能存一个DOM节点)

在这里插入图片描述

总结

因为之前有学习过vue所以感觉上手蛮快的,jsx语法也非常好用,也发现了很多与vue的不同之处,如,vvue的模板和数据是分开的 react是将模板和数据都以类的形式写在了一起,类式组件.牛

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

ADS1292R 使用过程心电图高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

开放原子开发者工作坊

实现一个家庭安防与环境监测系统（一）

开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S