React笔记

React笔记

React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来

React 特点：

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

CDN

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"</script>

使用React脚手架初始化项目

• 初始化项目，命令： npx create-react-app my-pro
  • npx 目的：提升包内提供的命令行工具的使用体验
  • 原来：先安装脚手架包，再使用这个包中提供的命令
  • 现在：无需安装脚手架包，就可以直接使用这个包提供的命令
  • create-react-app 这个是脚手架名称 不能随意更改
  • my-pro 自己定义的项目名称
• 启动项目，在项目根目录执行命令：npm start

显示如下页面，证明项目启动成功

基本方法

创建元素React.createElement()

var reactElement = React.createElement(
  	... // 标签名称字符串/ReactClass,
  	... // [元素的属性值对对象],
  	... // [元素的子节点]
)

1、参数：

1）第一个参数：可以是一个html标签名称字符串，也可以是一个ReactClass（必须）；

2）第二个参数：元素的属性值对对象（可选），这些属性可以通过this.props.*来调用；

3）第三个参数开始：元素的子节点（可选）。

2、返回值：

一个给定类型的ReactElement元素

例：

let h1 = React.createElement('h1',null,'我是标题')

let h2 = React.createElement('h1', null, 'hello wrod');

let div = React.createElement('div', {className: 'list'}, h1,h2);

渲染到页面ReactDOM.render

ReactDOM.render(template,targetDOM) 方法接收两个参数：

• 第一个是创建的模板，多个 **dom **元素外层需使用一个标签进行包裹，如

  ；

• 第二个参数是插入该模板的目标位置。

例：

ReactDOM.render(h1,document.getElementById('root'))

ReactDOM.render(<App />,document.getElementById('root'))

index.js

可通过index.js创建元素、渲染页面

创建元素

let h1 = <h1>我是通过JSX创建的元素</h1>

渲染页面

ReactDOM.render(h1,document.getElementById('root'))

例：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';




let h1 = <h1>我是通过JSX创建的元素</h1>
ReactDOM.render(h1, document.getElementById('root'))
// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById('root')
// );

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

JSX

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

1、所有的模板要被一个根节点包含起来，在render函数中return返回的只能包含一个顶层标签，否则也会报错

2、模板元素不要加引号

3、JSX基本语法规则，遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用JS规则解析

4、绑定属性注意：

  class 要变成 className  

  for 要变成  htmlFor

  style属性和以前的写法有些不一样

        <div style={{'color':'blue'}}>{this.state.title}</div>

    <div style={{'color':this.state.color}}>{this.state.title}</div>

5、循环数据要加key

6、组件的构造函数中一定要注意 super

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

   constructor(props){
         super(props);  /*用于父子组件传值  固定写法*/
         this.state={
             userinfo:'张三'
         }
     }

7、组件名称首字母大写、组件类名称首字母大写

8、react解析html

<div dangerouslySetInnerHTML={{__html: this.state.list.htmlStr}}> </div>

9、条件判断的四种写法

用三元表达式****, 使用dom元素**变量，直接调用函数，使用逻辑运算符，**利用即时执行函数

   class HelloWorld extends React.Component{
          render(){
              return <p>Hello {
                  (function(obj){
                     if(obj.props.name){
                         return obj.props.name;
                     }else{
                         return "World";
                     }
                  }(this))
             }</p>
         }
     }

• 使用JSX语法创建react元素

let h1 = <h1>我是通过JSX创建的元素</h1>

• 使用ReactDOM来渲染元素

ReactDOM.render(h1,document.getElementById('root'))