初始react
react是一个构建用户界面的javascript库
创建一个简单react
第一步：引入核心库
<!-- react开发的核心库，创建虚拟dom对象 -->
<script src="./../js/react.development.js"></script>
<!-- 将虚拟dom转化为html，渲染视图所用 -->
<script src="./../js/react-dom.development.js"></script>
第二步：在真实dom中提供一个挂载点
<div id="root"></div>
第三步：业务代码
创建虚拟dom对象 - createElement
let el = React.createElement
/*
三个参数：
参数1：html标签名称 / 组件名称
参数2：标签属性，也可以是null，表示没有属性
参数3：子元素，可以是一个可以多个，可以是标签，字符串，对象，组件....
*/
let vnode = el('div',{
name:'a',
// class属性不能用class了，得用className
className:'active',
// 事件 用小驼峰命名
onclick:()=>{}
},'哈哈')
/*
将虚拟dom转为真实dom，渲染到页面
参数1：虚拟dom，也可以是组件
参数2：挂载点的真实dom
*/
ReactDom.render(vnode,document.querySelector('#root'))
这样的写法看起来很麻烦又不容易读代码，所以提供了一个babel库来解决这个问题，babel库就是把jsx代码解析成js代码的
第一步：引入babel库 (可以从bootstrap中直接应用，也可以下载，这里就不放了，实际用react脚手架不需要我们再这样引入)
第二步：在script标签上加<script type='text/babel'>代码段</script>
第三步：这时候的写法就和我们平常的HTML写法一样了
let vnode = (
<ul>
<li>
<span>任务1</span>
<span> -- 删除</span>
</li>
</ul>
)
ReactDOM.render(vnode,document.querySelector('#root'))
搭建react脚手架
安装前提：nodejs版本14+，npm版本5+
安装命令：npx create-react-app my-app
react组件
1.函数组件：（如果你在vscode中安装jsx插件可用 rfc 快捷键完成代码块搭建）
1. 创建一个函数 function / 箭头函数(推荐)
2. 函数名 首字母要大写
3. 必须要有返回值，返回值是一个jsx
4. 必须通过模块导出
注意：函数有一个可能的参数，可以接受任意值的数据[props]
2.类组件：(rcc)
1. 必须要用es6的面向对象创建类 class 创建
2. 它要继承一个父类[React.Component]
3. 此类中必须要有一个render方法，此方法一定要返回一个jsx
4. 导出此类
react组件传值
1.父传子
函数组件
使用自定义属性 子接收用props
props参数可以接收任意类型
import React from 'react';
// 子组件 - 通过解构来获取props中的属性数据也可设置默认值
// const Child = ({title='默认值'}) => {
// 常用
const Child = props => {
let { title='默认值', fn, temp } = props
fn && fn()
return (
<div>
<h3>{title}</h3>
{temp}
</div>
)
}
// 需要传递的组件
const Temp = () => {
return (
<center>我是传来的组件</center>
)
}
const App = () => {
// 变量
const title = '传来的child'
const fn = () => console.log('传来的fn');
return (
<div>
{/* 通过自定义属性，传值给子组件数据 */}
{/* 啥也不传值 */}
<Child></Child>
<hr />
{/* 传个数据 */}
<Child title={title}></Child>
<hr />
{/* 传个函数 */}
<Child fn={fn}></Child>
<hr />
{/* 传个组件 */}
<Child temp={<Temp></Temp>}></Child>
</div>
);
}
export default App;
类组件
父传子传值和函数组件差不多，但获取需要用this.props
代码参考函数组件，将数据传入用this.数据
绑定事件
函数组件：（函数组件没有this）
{/* 点击事件命名小驼峰 */}
<button onClick={fn}>点我++</button>
类组件：
<button onClick={this.fn}>点我++</button>
注：修改数据不会重新渲染视图，可以用强刷新 this.forceUpdate()
event事件
每个方法中都有一个形参是evt，是触发事件的dom对象，可用它获取值或者操作dom
// 无参数
// 都会有一个参数evt.是当前触发事件的dom对象
// 获取输入的值
fn = (evt) => console.log(evt.target.value)
// 如果在绑定方法时，用了小括号传参，则event就顺延到后面
fn1 = id => evt => console.log(id, evt.target.value);
// 有参数-主动把event对象传入
fn2 = (id, evt) => console.log(id, evt.target.value)
render函数中
render() {
return (
<div>
无参数：<input type="text" onInput={this.fn} />
{/* 有小括号传参 */}
有参数：<input type="text" onInput={this.fn1(100)} />
{/* react事件中心 绑定事件会主动把event对象传入到实现方法参数中 */}
主动放参数：<input type="text" onInput={(evt) => { this.fn2(100, evt) }} />
</div>
);
}
注：
如果有小括号传参，则方法需要函数包裹，evt顺延到后面
也可以在绑定事件时添加一个箭头函数包裹，并且把evt形参传递过去（常用）
