React笔记
简介
React是一个用于创建用户界面（web界面和原生APP界面）的JS库，不涉及HTML和CSS ，在React框架中没有HTML和CSS 。由Facebook公司推出。
认识虚拟dom与真实dom
在MVVM框架中，经常会用到一个概念就是数据改变新更新虚拟DOM，再由虚拟DOM 去更新真实DOM ，这是因为虚拟DOM比真实DOM更轻
在控制台输出真实DOM和虚拟DOM对这种轻会由明显的感受
//创建虚拟dom元素
let vchild = React.createElement(
'button',
{
title:'提交注册信息',
className:'succ'
},
'提交'
)
console.dir(vchild);
控制台输出，可以看到属性都很少
下面是真实DOM
<div id="app">
</div>
<script>
let child = document.createElement('app')
console.dir(child);
</script>
在控制台输出可以看到，它的属性很多
通过上面的对比，相信能够很清晰的感觉到虚拟DOM 与真实DOM 的轻重
认识JSX
JSX（JavaScript XML）是一种在 JavaScript 中编写可嵌入 XML/HTML 类型结构的语法扩展。它是 React 库中用于构建用户界面的核心部分。
JSX 的编译过程会将代码转换为普通的 JavaScript 对象，这些对象描述了界面的结构和行为。React 库根据这些对象来生成实际的 DOM 元素，并进行渲染。
下面是一个简单JSX示例，构建了一个购物车数量增减的小组件
let count = 5
let vchild = <div className="count">
<button>-</button>
<span title={count}>{count}</span> {/*这是一个注释*/}
<button>+</button>
</div>
//
// let parent = document.getElementById('app')
let vparent = ReactDOM.createRoot(app)
vparent.render(vchild)
React起步
认识render
render是将 React 组件渲染到指定 DOM 元素的关键方法。通过使用这个方法，你可以在你的应用程序中将 React 组件转化为可见的用户界面。
下面是一个简单的示例，通过JSX语法创建一个简单 的自定义组件，并在虚拟子元素中使用它，最后父元素使用render将组件渲染到真实页面上
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
// 创建自定义组件
function BuyCount(){
return <div className="bc" style={{background:'#f00',padding:'1.25rem'}}>
<button>-</button>
<span>3</span>
<button>+</button>
</div>
}
let vchild = <div>
<BuyCount />
<BuyCount></BuyCount>
</div>
let vparent = ReactDOM.createRoot(app)
vparent.render(vchild)
React的数据绑定
在React 中所有的绑定都使用{}完成，
-
内容绑定：<标签开始>{表达式}</标签结束>
-
属性绑定：<any 属性名={表达式} />
-
样式绑定：<any style={obj} or className={表达式}
-
事件绑定：<any onClick={fn1} or onClick={event=>fn2(参数)}
-
双向数据绑定：涉及到hooks的使用
-
条件渲染：<any style={{display:条件？‘block’:‘none’}}
-
列表渲染：{list.map((item,index)=>(<div key={index}>{item}))}
认识hooks(勾子)
hooks是React16.8引入的功能，它们是一组函数，允许您在函数组件中使用 React 的特性。使用 Hooks，您可以在无需编写类组件的情况下重用状态逻辑和其他 React 特性。
useState
用于在函数组件中添加和管理状态。它返回一个状态值和更新该状态值的函数，并且在组件重新渲染时保持状态不变。它是一个异步函数。
做一个简单的示例-计数器
let [count,setCount] = React.useState(0)
let f1 = function(){
setCount(count+1)
}
return (
<button onClick={f1}>你已经点击了：{count}</button>
)
在这个示例中，我们可以看到useState方法中可以解构出一个数组[变量，方法]=React.useState(初始值)，只有在方法中变量的值发生变化时，才会被通知到React，最终在页面改变。
了解useState以后，React的数据绑定应该就比较好理解了
{/*双向数据绑定示例*/}
<input value={age} onChange={e=>setAge(e.target.value)}/>
useRef
用于在函数组件中创建一个可变的引用，它返回一个可变的 ref 对象，并且在组件重新渲染时保持引用不变。用于在非受控组件中，接受组件的值。（受控组件：值由value绑定）
let r = useRef()
<input ref={r} defaultValue="默认值" />
在提交时访问r.current.value便能够将值取出
useEffect
副作用，辅助功能
用于React的生命周期
认识React的生命周期
-
方法1：组件挂载 + 任意数据更新 —— 迎接新数据
`useEffect( ()=>{} )` -
方法2：组件挂载 + 依赖的数据更新 —— 迎接新数据
`useEffect( ()=>{},[数据1, ....] )` -
方法3：组件挂载
` useEffect( ()=>{},[ ] )` -
方法4：任意数据更新 + 组件卸载 —— 送走旧数据
`useEffect( ()=>{ return ()=>{} } )` -
方法5：依赖的数据更新 + 组件卸载 —— 送走旧数据
`useEffect( ()=>{ return ()=>{}}, [数据1, ...] )` -
方法6：组件卸载 —— 送走旧数据
` useEffect( ()=>{return ()=>{}}, [ ] )`
React Native
React Native 是React提供的一个用于构建移动应用程序的开源框架。它允许开发者使用 JavaScript 和 React 来创建原生的、高性能的移动应用。
与传统的原生开发方式不同，React Native 使用了一种称为"Bridge"的机制来连接 JavaScript 代码和原生代码。这样，开发者可以使用熟悉的 React 组件模型和 JavaScript 语言来构建用户界面，同时仍然能够访问原生平台的功能和特性。
RN中的可用组件
-
RN项目中禁止使用HTML标签；RNApp是原生App，底层是没有浏览器的，不能解析HTML代码；
-
RN项目中可以自定义组件
-
在RN项目中components目录下创建一个自定义组件
-
在父组件中可以直接使用
- RN项目还可以使用RN组件库中的组件
- 手册地址：https://reactnative.dev/docs/components-and-apis
RN中可用的样式
-
RN应用中没有浏览器，没有标准CSS解释器，也就不能使用标准CSS！RN模拟标准CSS实现了一套基于JS对象的样式系统。
-
RN中的样式分为三类：
-
行内样式：
<Text style={{color:'red'}}></Text> -
内部样式：
let ss=StyleSheet.create({danger:{color:'red'}}) <Text style={ss.danger}> -
外部样式：
export let gss=StyleSheet.create({danger:{color:'red'}}) <Text style={gss.danger}>
-
-
RN中的尺寸只有两种：% 和 px ,书写px时直接写数值就可以
-
默认字体大小14px，可以无限小
-
RN样式中没有class/className属性
-
RN中所有的复合属性都被拆分成单一属性，不再有复合值，类似与border
-
RN中的样式大多的都是可以跨平台使用的
-
style可以绑定样式组，但是只有最后一个生效，其他的样式被最后一个覆盖
-
RN中的样式没有继承特性，即父级的样式不会给到子级，但是<Text>中<Text>列外，上一级Text的样式可以传到下一级Text
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
