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是将模板和数据都以类的形式写在了一起,类式组件.牛

Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

开放原子开源基金会新增捐赠人（2024年9月）

2024年9月，新增以下单位成为开放原子开源基金会及旗下项目捐赠人。

avatar 开放原子开发者工作坊

2024开放原子开发者大会议题征集正式开启

2024开放原子开发者大会（以下简称“大会”）将于12月中旬重磅来袭,2024开放原子开发者大会议题征集正式开启!

avatar 开放原子开发者工作坊

操作系统大会&openEuler Summit 2024参会指南，请查收！

avatar 开放原子开发者工作坊