app展示网站模板html,上海注销公司需要什么资料和流程,wordpress首页设置,怎样自己做商场网站目录
一、简单认识
1.1、特点
1.2、JSX语法规则
1.3、函数组件和类式组件
1.4、类组件三大属性state、props、refs
1.4.1、state
1.4.2、props
1.4.3、refs
1.5、事件处理
1.6、收集表单数据—非受控组件和受控组件
1.7、高阶函数—函数柯里化
1.8、生命周期—新旧…目录
一、简单认识
1.1、特点
1.2、JSX语法规则
1.3、函数组件和类式组件
1.4、类组件三大属性state、props、refs
1.4.1、state
1.4.2、props
1.4.3、refs
1.5、事件处理
1.6、收集表单数据—非受控组件和受控组件
1.7、高阶函数—函数柯里化
1.8、生命周期—新旧对比
1.8.1、旧16
1.8.2、新17
1.8.3、对比
1.9、DOM的Diffing算法
二、脚手架搭建
2.1、创建项目 因为真实DOM频繁操作节点会导致页面重绘和重排影响性能所以会用虚拟DOM【应用于前端框架】进行跨平台开发。
一、简单认识 英文Getting Started – React 中文快速入门 – React 中文文档 1.1、特点 (1)采用组件化模式、声明式编码提高开发效率及组件复用率 (2)在React Native中使用它进行移动端开发 (3)使用虚拟DOMDiffing算法减少与真实DOM的交互 1.2、JSX语法规则 (1)、定义虚拟DOM时不要写引号 (2)、标签中混入js表达式时要用{} (3)、样式的类名指定不要用class,要用className (4)、内联样式要用style{{key:value}}形式 (5)、只有一个根标签所有标签必须闭合 (6)、标签首字母 若小写字母开头则将该标签转为html中同名元素若html中没有该标签对应的同名元素则报错 若大写字母开头则react去找对应的组件若找不到则报错 在Microsoft Edge安装React Developer Tools扩展进行开发辅助以下语法基于16版本。
1.3、函数组件和类式组件
前者适用于简单组件(只能使用props属性除非使用Hooks里的useRef 和 useState )后者适用于复杂组件 div idroot/divscript typetext/babel// 1.创建函数式组件function MyComponent() {return h1我是函数式组件/h1;}// 2.渲染组件到页面ReactDOM.render(MyComponent /, document.getElementById(root));/script // 1.创建类式组件class MyComponent extends React.Component {render() {// render()中的this 指向当前组件实例return h1我是类式组件/h1;}}// 2.渲染组件到页面ReactDOM.render(MyComponent /, document.getElementById(root));
1.4、类组件三大属性state、props、refs
注意类组件里的render()会调用1N次只要state更新就变
1.4.1、state class MyMood extends React.Component {state {isGood: false,number: 0,};render() {const { isGood, number } this.state;return (divh1 onClick{this.changeMyMood}今天心情很{isGood ? 好 : 糟糕}/h1h1 onClick{() this.setState({ number: 10 })}打个{number}分/h1/div);}changeMyMood () {this.setState({isGood: !this.state.isGood,});};}ReactDOM.render(MyMood /, document.getElementById(root)); 总结 (1)、状态必须通过setState进行更新且更新是一种合并不是替换 (2)、组件中render()方法中的this为组件实例对象当this为undefined如何解决 a.通过函数对象的bind()强制绑定thisb.箭头函数 1.4.2、props
div idroot1/div
div idroot2/div
div idroot3/divscript typetext/babelclass Person extends React.Component {// 使用 PropTypes 进行类型检查static propTypes {name: PropTypes.string.isRequired,//必传项sex: PropTypes.string,age: PropTypes.number,onSuccess: PropTypes.func};// 设置默认属性static defaultProps {age: 18,sex: 男};render() {const { name, age, sex } this.props;return (ulli姓名{name}/lili性别{sex}/lili年龄{age 1}/li/ul);}}
ReactDOM.render(Person nametom age{18} sex男 onSuccess{onSuccess}/, document.getElementById(root1));// 批量传递 props 【{...x}】const backData { name: 后端返回数据, age: 19, sex: 女 };
ReactDOM.render(Person {...backData} /, document.getElementById(root2));
ReactDOM.render(Person namejack age{20}/, document.getElementById(root3));function onSuccess() {console.log(执行事件);}/script
函数组件Props function Person(props) {const { name, age, sex } props;return (ulli姓名{name}/lili性别{sex}/lili年龄{age 1}/li/ul);}Person.propTypes {name: PropTypes.string.isRequired, sex: PropTypes.string,age: PropTypes.number,};
ReactDOM.render(Person nametom age{18} sex男 /, document.getElementById(root)); 总结 (1)、组件标签的所有属性都保存在props中但是组件内部不要修改props数据 (2)、批量传递{...item}、类型检查PropTypes、默认属性defaultProps 1.4.3、refs
class MyComponent extends React.Component {showData () {const { input1 } this.refs;alert(input1.value);};showData2 () {const { input2 } this;alert(input2.value);};myRefReact.createRef();showData3 () {alert(this.myRef.current.value);};
render() {return (div{/* 1、字符串形式 */}input refinput1 typetext placeholder点击按钮提示数据 /nbsp;button onClick{this.showData}点击提示左侧数据/buttonnbsp;{/* 2、回调函数形式 */}inputref{(c) (this.input2 c)}onBlur{this.showData2}typetextplaceholder失去焦点提示数据/nbsp;{/* 3、createRef API存储被ref标识的节点“专人专用” */}inputref{this.myRef}onBlur{this.showData3}typetextplaceholdercreateRef的使用//div);}
}
ReactDOM.render(MyComponent /, document.getElementById(root)); 总结 (1)、直接访问和操作DOM元素或React组件实例 (2)、使用React.createRef()或者回调函数形式类组件使用useRef函数组件 1.5、事件处理 总结 (1)、通过onXxx属性指定事件处理函数事件通过事件委托【委托给组件最外层的元素】处理的 (2)、通过event.target得到发生事件的DOM元素对象【高效】 (3)、原生Js事件使用onclick而React事件使用onClick【为了更好的兼容性】。 1.6、收集表单数据—非受控组件和受控组件 特性受控组件 (Controlled)非受控组件 (Uncontrolled)值存储位置存储在React组件的state中存储在DOM中使用ref访问表单元素控制React通过state控制表单的值浏览器控制React不干涉更新方式用户输入时通过onChange更新state使用ref获取值无需触发事件适用场景需要表单验证、交互或复杂逻辑时简单表单且无需与React状态紧密交互代码复杂度稍微复杂需要维护状态和事件处理简单直接使用ref访问DOM
1.7、高阶函数—函数柯里化 总结 高阶函数如果函数的参数或者返回值是函数那么这个函数就是高阶函数。 常见有Promise、setTimeout、arr.map()、call、apply、bind、... 函数柯里化通过函数调用继续返回函数的方式实现多次接收参数最后统一处理的一种函数编码形式。· 或者直接在视图上使用箭头函数同时传入属性值和对应的event。 1.8、生命周期—新旧对比
1.8.1、旧16 script typetext/babelclass MyComponent extends React.Component {constructor(props) {console.log(构造器---constructor);super(props);this.state { count: 0 };}componentWillMount() {console.log(组件将要挂载---componentWillMount);}componentDidMount() {console.log(组件挂载完毕---componentDidMount);}shouldComponentUpdate(nextProps, nextState) {console.log(组件是否需要更新---shouldComponentUpdate);return true;}componentWillUpdate() {console.log(组件将要更新---componentWillUpdate);}componentDidUpdate() {console.log(组件更新完毕---componentDidUpdate);}componentWillUnmount() {console.log(组件即将卸载---componentWillUnmount);}moveIt () {ReactDOM.unmountComponentAtNode(document.getElementById(root)); //卸载};addIt () {const { count } this.state;this.setState({ count: count 1 });};forceIt () {this.forceUpdate();};render() {console.log(挂载页面---render);const { count } this.state;return (divh2当前求和为{count}/h2button onClick{this.addIt}点击1/buttonbutton onClick{this.moveIt}销毁/buttonbutton onClick{this.forceIt}强制更新/button/div);}}// A和B是父子关系class A extends React.Component {state { carName: 奔驰 };changeCar () {this.setState({ carName: 宝马 });};render() {return (divdivA页面/divbutton onClick{this.changeCar}换车/buttonB carName{this.state.carName} //div);}}class B extends React.Component {componentWillReceiveProps(nextProps) {console.log(B组件接收到新的属性(第一次不调), nextProps);}render() {return divB组件接收的车是:{this.props.carName}/div;}}// ReactDOM.render(MyComponent /, document.getElementById(root));ReactDOM.render(A /, document.getElementById(root));/script 1.8.2、新17 static getDerivedStateFromProps(props,state) {console.log(获取新的属性---getDerivedStateFromProps,props,state);return null;//返回null或者props}ReactDOM.render(MyComponent count{199} /, document.getElementById(root));
style.list {width: 200px;height: 150px;background-color: skyblue;overflow: auto;}.news {height: 30px;
/style
class MyComponent extends React.Component {state { newArr: [] }componentDidMount() {setInterval(() {const { newArr } this.stateconst news 新闻 (newArr.length 1)this.setState({ newArr: [news, ...newArr] })}, 1000);}getSnapshotBeforeUpdate(prevProps, prevState) {return this.refs.list.scrollHeight;// 获取更新前的DOM节点}componentDidUpdate(prevProps, prevState, snapshot) {this.refs.list.scrollTop this.refs.list.scrollHeight - snapshot;}render() {return div classNamelist reflist{this.state.newArr.map((item, index) {return div classNamenews key{index}{item}/div})}/div;}
} 1.8.3、对比 17在16的基础上新增了getDerivedStateFromProps、getSnapshotBeforeUpdate 即将废弃 componentWillMount、componentWillReceiveProps、componentWillUpdate三个钩子。 1.9、DOM的Diffing算法
经典面试题为啥key不能使用index而是取id唯一标识 总结 1、使用 index 作为 key 在列表项的顺序发生变化、增加或删除时可能会导致错误渲染或状态丢失。 适用于列表项不变且不涉及删除、增加或排序操作的简单情况。 2、使用 id 作为 key 更稳定能够确保元素在更新时保持一致特别是在列表顺序发生变化时。 尤其是在动态数据列表增、删、改、排序等操作中使用。 二、脚手架搭建
2.1、创建项目 1、全局安装npm i -g create-react-app【查看是否下载create-react-app --version】 2、切换到想创建项目的目录下create-react-app react_app【Node版本在14及以上】 3、进入项目文件夹cd react_app 4、启动项目npm start【修改package.json重新下载node_modules、 package-lock.json来修改版本】 或者直接用React--Umi和Dva_react dva-CSDN博客
