React基础概述（一）

React基础

React安装

1. npm i react react-dom 安装依赖
2. npx create-react-app package-name 初始化项目；
3. npm start 启动项目；；

组件化

在react 脚手架中使用react

1.导入react和react-dom两个包
import React from ‘react’
import ReactDOM from ‘react-dom’
2.调用React.createElement()方法创建react元素
3.调用ReactDOM.render()方法渲染react元素到页面中

ReactDOM.render()只用于web应用

JSX使用（JavaScript XML简写 【React核心内容】

属性名使用驼峰命名法

特殊属性名：class=>className for=>htmlFor tabindex=>tabIndex
使用JSX时用小括号包裹 避免JS自动插入分号
如果一个元素没有子节点可以直接使用单标签结束

JSX表达式
JSX条件渲染

JSX列表渲染
使用数组的map()方法
遍历谁把key加给谁（尽量避免用索引号当做key）
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

JSX的样式处理
行内样式–style
style{{}}
类名–className（推荐）

[声明式语法]

const el=<h1>Hello React</h1>

[命令式语法]

const el = React.createElement('h1',{title:'AAAA'},'Hello React')

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

JSX中使用JS表达式
{[‘a’,‘b’].join(‘—’)} JSX数组转化字符串
{true+‘’} 转化成字符串

不能写if/for/switch语句

【条件渲染】
1.三元表达式
2.if/else
3.逻辑运算符
【列表渲染 要加key】

const arr=['1','2','3']
<ul>
   {
       arr.map((item)=>{
	<li key={item}>{item}</li>
	})
    }
</ul>

React组件基础

1.组件的创建方式：函数组件/类组件
2.无状态（函数）组件，负责静态结构展示
3.有状态（类）组件，负责更新UI
4.绑定事件注意this指向问题
5.推荐使用受控组件来处理表单
6.完全利用js语言的能力创建组件

组件表示页面中的部分功能
组合多个组件实现完完整的页面功能
特点：可复用、独立、可组合
组件创建方式

使用函数创建组件
函数组件：使用JS的函数（或箭头函数）创建的组件
约定1：函数名称必须以大写字母开头
约定2：函数组件必须要有返回值，表示该组件的结构
如果返回值为null，表示不渲染任何内容

使用类创建组件
使用ES6的class创建组件
约定1：类名称必须以大写字母开头
约定2：类组件应该继承ReactComponent父类，从而可以使用父类中提供的方法或属性
约定3：类组件必须提供render()方法
约定4：render()必须要有返回值，表示该组件的结构

const Hello = (props) => {
  return (
     <div>
       <h1>props:{props.name}</h1>
     </div>
   );
 };

/*类组件 
如果写了构造函数，应该将props传递给super()，否则无法在构造函数中获取到props
*/
class Hello extends React.Component {
  /*
    推荐将props传递给父类构造函数
  */
  constructor(props) {
    super(props);
    console.log(props);
  }
  render() {
    return (
      <div>
        <h1>props:{this.props.age}</h1>
        {this.props.tag}
      </div>
    );
  }
}

*抽离为独立的JS文件
把组件放到单独的JS文件中
创建js文件
在文件中导入react
创建组件
在js文件中导出该组件
在页面中导入组件
渲染页面

React事件处理

事件绑定
on+事件名称={事件处理程序}
使用驼峰命名法
函数中的事件绑定

const Hello = () => {
  function click() {
    alert("Click");
  }
  return (
    <div>
      这是第一个单独的组件
      <br />
      <button onClick={click}>click</button>
    </div>
  );
};

类中的事件绑定

class Hello extends React.Component {
  // 事件处理程序
  click() {
    alert("Click");
  }
  render() {
    return (
      <div>
        这是第一个单独的组件
        <br />
        <button onClick={this.click}>click</button>
      </div>
    );
  }
}

区别：
函数中的事件处理函数加function 类不加
函数中的事件绑定{中不加this} 类要加this

事件对象 e
事件对象阻止默认行为
e.preventDefault()

有状态组件和无状态组件
函数组件又叫做无状态组件，类组件又叫做有状态组件
状态（state）即数据
函数组件没有自己的状态，只负责数据展示（静态）
类组件有自己的状态，负责更新UI（动态）