React讲解（详细&&带有注解解释） |
您所在的位置：网站首页 › react的意思 › React讲解（详细&&带有注解解释） |
React讲解（详细&&带有注解解释）
|
因为比较详细，也带有 用法的详细解释（以注解的形式），包含每个知识相关的demo。请大家耐心看完！！！ 目录 React特点React 安装 1.Hello React2.虚拟DOM的两种创建方式使用jsx创建DOM使用js创建DOM虚拟DOM和真实的dom 3.jsx语法规则4.jsx的小练习5.react中定义组件函数式组件类式组件 6.组件实例三大属性：state、props、refstate标准形式state简写模式propsprops的简写方式函数式组件使用Props字符串形式ref回调函数的形式ref回调函数的形式ref 次数问题createRef 7.react收集表单的数据1_非受控组件2_受控组件 8.React 组件生命周期挂载更新卸载
React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 React特点1.声明式设计 −React采用声明范式，可以轻松描述应用。 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。 React 安装React 可以直接下载使用，下载包中也提供了很多学习的实例。 本教程使用了 React 的版本为 16.4.0，你可以在官网 https://reactjs.org/ 下载最新版。 你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下： 官方提供的 CDN 地址： 1.Hello React DOCTYPE html> Hello React dksajdskaljdlas /* ReactDOM.render( Hello,world, document.getElementById('example') ); */ // class在react内是关键字，不能作为属性进行操作，如果需要绑定class的话，我们可以使用className // const H1Dom = 我是大标题 const H1Dom = color: "#efefef", fontSize: "20px" }}>我是大标题 const H2Dom = (Props) => { let text = Props.title ? Props.title : '小标题' return {text} } const H3Dom = React.createElement('h3', '', '这是h3标题') class H4Dom extends React.Component{ constructor(props){ super(props) } render(){ return 这是h4标签 } } //render 方法可以接收两个参数 // 1--虚拟的dom // 2--虚拟dom的安放处 ReactDOM.render( // H1Dom, // , // H3Dom, , document.getElementById('example') ); 2.虚拟DOM的两种创建方式 使用jsx创建DOM DOCTYPE html> hello_react /*此处一定写babel*/ //1.创建虚拟dom const VDOM = ( hello react ) /*此处一定不要写引号，因为不是字符串*/ //2.渲染虚拟dom到页面 ReactDOM.render(VDOM,document.getElementById('test')); 使用js创建DOM DOCTYPE html> hello_react //1.创建虚拟dom const VDOM = React.createElement('h1',{id:'title'},'hello react') //2.渲染虚拟dom到页面 ReactDOM.render(VDOM,document.getElementById('test')); 虚拟DOM和真实的dom DOCTYPE html> hello_react /*此处一定写babel*/ //1.创建虚拟dom const VDOM = ( hello react ) /*此处一定不要写引号，因为不是字符串*/ //2.渲染虚拟dom到页面 ReactDOM.render(VDOM,document.getElementById('test')); console.log('虚拟dom',VDOM) const TDOM=document.getElementById('demo') console.log('真实dom',TDOM) console.log(typeof VDOM) console.log(VDOM instanceof Object) 3.jsx语法规则 DOCTYPE html> hello_react .title { background-color: aqua; width: 200px; } /*此处一定写babel*/ const myId = 'GPSmODSTY' const myData = "gpsModesty" //1.创建虚拟dom const VDOM = ( { color: 'white', fontSize: '30px' }}> {myData.toLowerCase()} { color: 'white', fontSize: '30px' }}>{myData.toUpperCase()} 123 ) //2.渲染虚拟dom到页面 ReactDOM.render(VDOM, document.getElementById('test')); /* jsx语法规则： 1.定义虚拟dom时,不要写引号 2.标签中混入js表达式时候，要用{} 3.样式的类名指定不要用class，要用className 4.内联样式，要用style={{key,value}}的形式去写 5.虚拟dom必须只有一个根标签 6.标签必须闭合 7.标签首字母 1.若小写字母开头，则将该标签转为HTML同名元素。如无该标签对应的同名元素，则报错 2.若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错 */ 4.jsx的小练习 DOCTYPE html> jsx小练习 //模拟一些数据 const data = ['GPS', 'React', 'Modesty'] //1.创建虚拟dom const VDOM = ( 前端js框架列表 { data.map((item,index) => { return item} }) } ) //2.渲染虚拟dom到页面 ReactDOM.render(VDOM, document.getElementById('test')); 5.react中定义组件 函数式组件 DOCTYPE html> jsx小练习 //1.创建函数式组件 function Demo() { console.log(this)//此处的this是underfined，因为babel开启了严格的模式 return 我是用函数定义的组件（适用于【简单组件】的定义） } //2.渲染组件到页面 ReactDOM.render(, document.getElementById('test')) /* 执行了ReactDOM.render 以后，发生了什么？ 1.react解析组件标签，找到了Mycomponent组件 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟dom转为真实的dom，随后呈现在页面中 */ 类式组件 DOCTYPE html> 创建类式组件 //1.创建类式组件 class MyComponent extends React.Component{ render(){ return 我是用类定义的组件（适用于【复杂组件】的定义） } } //2.渲染组件到页面 ReactDOM.render(,document.getElementById('test')) 6.组件实例三大属性：state、props、ref state标准形式 DOCTYPE html> state组件 //1.创建类式组件 class Weather extends React.Component { constructor(props) { super(props) this.state = { isHot: true } this.changeWeather = this.changeWeather.bind(this) } render() { return this.state.isHot ? '炎热' : '凉爽'} } changeWeather() { const isHot = this.state.isHot this.setState({isHot:!isHot}) } } //2.渲染组件到页面 ReactDOM.render(, document.getElementById('test')) state简写模式 DOCTYPE html> state组件 //1.创建类式组件 class Weather extends React.Component { state = { isHot: true }; render() { return ( this.state.isHot ? "炎热" : "凉爽"} ); } changeWeather = () => { const isHot = this.state.isHot; this.setState({ isHot: !isHot }); }; } //2.渲染组件到页面 ReactDOM.render(, document.getElementById("test")); props DOCTYPE html> props组件 //创建组件 class Person extends React.Component { render() { const { name, age, sex } = this.props; return ( 姓名:{name} 年龄:{age} 性别:{sex} ); } } Person.propTypes = { name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number, speak:PropTypes.func }; Person.defaultProps={ sex:"男", age:18 } //渲染组件到页面 const p = { name: "GPS", age: 123, sex: "男" }; ReactDOM.render( console.log("123"); } props的简写方式 DOCTYPE html> props组件 //创建组件 class Person extends React.Component { static propTypes = { name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number, speak: PropTypes.func, }; static defaultProps = { sex: "男", age: 18, }; render() { const { name, age, sex } = this.props; return ( 姓名:{name} 年龄:{age} 性别:{sex} ); } } //渲染组件到页面 ReactDOM.render(, document.getElementById("test")); function speak() { console.log("123"); } 函数式组件使用Props DOCTYPE html> props组件 //创建组件 function Person(props) { const { name, age, sex } = props; return ( 姓名：{name} 年龄：{age} 性别：{sex} ); } //渲染组件到页面 ReactDOM.render( //创建组件 class Demo extends React.Component { //展示左侧输入框的数据 showData = () => { const { input1 } = this.refs; console.log(input1.value); alert(input1.value); }; showData2 = () => { const { input2 } = this.refs; console.log(input2.value); alert(input2.value); }; render() { return ( this.showData2} ref="input2" type="text" placeholder="失去焦点提示数据" /> ); } } //渲染组件到页面 ReactDOM.render(, document.getElementById("test")); 回调函数的形式ref DOCTYPE html> props组件 //创建组件 class Demo extends React.Component { //展示左侧输入框的数据 showData = () => { const { input1 } = this; alert(input1.value); }; showData2 = () => { const { input2 } = this; alert(input2.value); }; render() { return ( this.showData}>点我提示左侧的数据 (rNode) => (this.input2 = rNode)} type="text" placeholder="失去焦点提示数据" /> ); } } //渲染组件到页面 ReactDOM.render(, document.getElementById("test")); 回调函数的形式ref 次数问题 DOCTYPE html> props组件 //创建组件 class Demo extends React.Component { state = { isHost: false }; showData = () => { const { input1 } = this; alert(input1.value); }; changeWeather = () => { //获取原来的状态 const { isHost } = this.state; //更新状态 this.setState({ isHost: !isHost }); }; saveInput = (c) => { this.input1 = c; console.log(c); }; render() { const { isHost } = this.state; return ( 今天的天气很{isHost ? "炎热" : "凉爽"} {/* {this.input1 = lNode;console.log("@", lNode);}}type="text"placeholder="点击按钮提示数据"/>*/} this.showData}>点我提示左侧的数据 //创建组件 class Demo extends React.Component { myRef=React.createRef() state = { isHost: false }; showData = () => { // const { input1 } = this; // alert(input1.value); alert(this.myRef.current.value); }; changeWeather = () => { //获取原来的状态 const { isHost } = this.state; //更新状态 this.setState({ isHost: !isHost }); }; saveInput = (c) => { this.input1 = c; console.log(c); }; render() { const { isHost } = this.state; return ( 今天的天气很{isHost ? "炎热" : "凉爽"} this.showData}>点我提示左侧的数据 //创建组件 class Login extends React.Component { handleSubmit=(event)=>{ event.preventDefault();//阻止表单提交 //函数体 const {username,password}=this alert(`你输入的用户名是:${username.value}密码是${password.value}`) } render() { return ( c=>this.username=c} type="text" name="username"/> ; 密码： //创建组件 class Login extends React.Component { state ={ username:'', password:'' } saveFormaData=(dataType)=>{ return (event)=>{ this.setState({[dataType]:event.target.value}) } } handleSubmit=(event)=>{ event.preventDefault();//阻止表单提交 //函数体 const {username,password}=this.state alert(`你输入的用户名是:${username}密码是${password}`) } render() { return ( this.saveFormaData('username')} type="text" name="username"/> ; 密码： |
【本文地址】