About React
2021/6/30 23:26:21
本文主要是介绍About React,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
初学者 React
文章目录
- 初学者 React
- 一、基本使用
- 1.JSX
- 2.基本使用语法
- 二、组件的使用
- 1.函数式组件
- 2.类式组件
- 3.类式组件——state简写
- 3.类式组件——props
- 3.类式组件——props简写
- 4.类式组件——refs
- 5.类式组件——refs回调函数形式与createRef
- 6.受控组件的高阶函数和柯里化
- 总结
一、基本使用
1.JSX
2.基本使用语法
代码如下:
<!-- 引入babel,用于将jsx转为js --> <div id="test"></div> <script type="text/babel"> const VDOM = <h2>无需引号</h2>//这里不用引号是因为script标签里用的babel,将jsx转换为js ReactDOM.render(VDOM, document.getElementById('test')); //将VDOM渲染到test中,且需要一个盒子 </script>
二、组件的使用
1.函数式组件
代码如下:
<script type="text/babel"> function Demo() { console.log(this) //此处的this是undefined,因为babel编译后开启严格模式,否则此时应该指向window return <h2>函数式组件</h2> } //渲染组件到页面 ReactDOM.render(<Demo/>, document.getElementById('test')) /// React解析组件 标签,找到了Demo组件 /// 发现组件是使用函数定义的,随后调用该函数,剪个返回的虚拟DOM转为真实DOM,渲染到页面中 // demo() { // //bebal开启了严格模式禁止自定义的this指向window,这里的this指的是undefined // console.log(this.state.isHot) // } </script>
2.类式组件
代码如下:
/// 创建类式组件 //必须要继承一个React中的Component //必须要有render //render 必须要有返回值 class MyComponent extends React.Component { constructor(props) { //在构造器里初始化状态,并且改变this指向 //constructor只调用一次 super(props) // super(props)的作用:构造器完全可以省略,但是如果不省略,props也不接不传,通过this访问props会undefined, // 构造器开发时几乎不会用 this.state = { isHot: true, wind: '大风' } this.demo = this.demo.bind(this); //解决this指向问题(bind:一是生成新的函数,一是改变this),右侧的demo是从原型链上找到的,左侧上的是挂在自身上的demo } render() { //调用1+n次,n是状态的更改 //render中的this,是MyComponent是实例对象 const {isHot, wind} = this.state; //这里的this.demo 首先要先找挂在自身的方法,如果没有再找原型链 return <h2 onClick={this.demo}>今天天气很{this.state.isHot ? '炎热' : '寒冷'}, {wind}</h2> } demo() { //点几次调用几次 //这里的this指的是undefined,只有通过实例调用demo时它的this才会是实例对象, //render()中的this.demo不是通过实例调用的 //类中方法this的指向:类中所有的方法都开启了局本严格模式,所以不能指向window,所以为undefined //由于demo是作为onclick的回调,所以不是调用类中的方法,而是直接调用堆中的函数,而又因为这个方法是类的方法被开启为局部严格模式,所以this为undefined console.log(this.state.isHot) const isHot = this.state.isHot; // state状态中的数据,React不支持直接更改,要使用内置API更改setState!!!!!!!! //且更新是一种合并不是替换 this.setState({isHot: !isHot}) //成功 } } //渲染组件到页面 ReactDOM.render(<MyComponent/>, document.getElementById("test3")); /* 执行了ReactDOM.render(<MyComponent/>...发生了什么? 1、React解析组件标签,找到来了组件 2、发现组件是用类定义的,然后new出来该类的实例 并通过该实例调用到原型上的render方法 3、将render返回的虚拟DOM转为真是DO。呈现在页面中 */
3.类式组件——state简写
state是指组件内部自身的值
<div id="test"></div> <script type="text/babel"> //创建组件 class Simple extends React.Component { //初始化状态,类中可以直接赋值,且不能在前面加变量声明 state= {isHot: false, wind: '清风'} render() { const {isHot, wind} = this.state return <h1 onClick={this.Weather} className={isHot ? 'active' : 'actived'}>今天天气:{isHot ? '炎热' : '凉爽'}, {wind}</h1> } //赋值语句加箭头函数 //自定义方法中this为undefined:1,强制绑定this,(bind()), 2,箭头函数 Weather = ()=>{ const isHot = this.state.isHot; this.setState({isHot:!isHot}) } } //渲染组件到页面上 ReactDOM.render(<Simple/>, document.getElementById('test')) </script>
3.类式组件——props
props是指外部传入类式组件内部的值
<div id="test"></div> <script type="text/javascript" src="../js/prop-types.js"></script> <script type="text/babel"> class Demo extends React.Component { render() { const {name, age, sex} = this.props; return ( <ul> <li>姓名:{name}</li> <li>年龄:{age}</li> <li>性别:{sex}</li> </ul> ) } } //props只读 //类型与必选 Demo.propTypes = { //PropTypes的类型为了避开关键字,所以大多小写 name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number, //不能用function,因为function是一个关键字,所以传func, speak: PropTypes.func } //默认值 Demo.defaultProps = { sex: '喵喵喵', age: 19 } let obj = { name: "S", age: 23, sex:"女" } //渲染组件到页面 //批量传递props,也就是批量传递标签属性 ReactDOM.render(<Demo {...obj}/>, document.getElementById('test')) //进行类型限制、进行必传行限制、进行默认值限制 ReactDOM.render(<Demo name="tom" age={22} sex="男" speak={speak} />, document.getElementById('test2')) function speak() { console.log('正在说话') } </script>
3.类式组件——props简写
<script type="text/babel"> //创建组件 class Person extends React.Component { //props只读 //类型与必选 static propTypes = { //PropTypes的类型为了避开关键字,所以大多小写 name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number, //不能用function,因为function是一个关键字,所以传func, speak: PropTypes.func } //默认值 static defaultProps = { sex: '喵喵喵', age: 19 } // state= {name: 'tome', age: 18, sex: '女'} render() { const { name, age, sex, speak } = this.props; return ( <ul> <li onClick={speak}>姓名:{name}</li> <li>性别:{age + 1}</li> <li>年龄:{sex}</li> </ul> ) } } let obj = { name: "S", age: 23, sex: "女" } //渲染组件到页面 //批量传递props,也就是批量传递标签属性 ReactDOM.render(<Person {...obj} />, document.getElementById('test')) //进行类型限制、进行必传行限制、进行默认值限制 ReactDOM.render(<Person name="tom" age={22} sex="男" speak={speak} />, document.getElementById('test2')) function speak() { console.log('正在说话') } </script>
4.类式组件——refs
ref就是把自身节点存入一个容器
<script type="text/babel"> class Person extends React.Component { // static propsTypes = { // } // static defaultProps = { // } //展示左侧输入框的数据 showData = () => { const {input1} = this.refs; alert(input1.value) } showData2 = ()=>{ const { input2 } = this.refs; alert(input2.value) } // ref用来代替id是一个标识 // 字符串的ref存在一些效率上的问题,写的过多之后会有问题 //使用其它两种 render() { return ( <div> <input ref="input1" type="text" placeholder="点击按钮提示数据"/> <button ref="button100" onClick={this.showData}>点击按钮</button> <input onBlur={this.showData2} ref="input2" type="text" placeholder="失去焦点提示数据"/> </div> ) } } ReactDOM.render(<Person/>, document.getElementById('test')) </script>
5.类式组件——refs回调函数形式与createRef
createRef比较麻烦,所以还是经常用内联样式
<script type="text/babel"> class Demo extends React.Component { myRef = React.createRef(); //调用后返回一个容器,该容器可以存储被ref所标识的节点,该容器是专人专用的也就是说只能存一个 //展示左侧输入框的数据 showData = () => { const {input1} = this; console.log(this.myRef.current.value) alert(input1.value) } showData2 = () => { const { input2 } = this; alert(input2.value) } //ref就是把自身节点存入一个容器 //回调形式的ref //注释掉的内联样式的ref会被执行两次: //这是因为状态更改之后重新调用render,之前的内联函数执行完被释放了,所以这里的函数就是一个新函数了, //因为不确定之前释放的函数做了什么,所以要先清空,所以传了一个null,然后再传入自身节点 //但是无关紧要,所以大多数还是用内联 saveInput= (c)=> { this.input1 = c } render() { return ( <div> {/*<input ref={c=>this.input1 = c} type="text" placeholder="点击按钮提示数据" />*/} <input ref={this.saveInput} type="text" placeholder="点击按钮提示数据" /> <button ref="button100" onClick={this.showData}>点击按钮</button> <input onBlur={this.showData2} ref={c =>this.input2 = c} type="text" placeholder="失去焦点提示数据" /> <input ref={this.myRef} type="text"/> </div> ) } } ReactDOM.render(<Demo/>, document.getElementById("test")) </script>
6.受控组件的高阶函数和柯里化
<script type="text/babel"> //发生事件的元素刚好是要操作的元素就不要用ref //收集表单数据 // react没有vue的双向数据绑定,需要自己用onChange去写 //受控组件类似vue双向绑定,而且不用ref,所以一般用这种 class NotContral extends React.Component { state = { username: '', password: '' } //保存表单数据到状态中 //这就是函数的柯里化技术:两个函数里的dataType和event两个参数最后集中处理 saveFormData = (dataType)=>{ //render首次直接将saveFormData的返回值给onChange,也就是一个匿名函数, //当onChange触发时,调用的其实是这个匿名函数,所以react会传event给这个匿名函数 //这是个高阶函数 /* 高阶函数满足条件:(promise,setTimeOut,arr.map()) 1.若A函数接收的参数是一个函数,那么这个A就是高阶函数 2.若A函数,调用的返回值是一个函数,那么A就是高阶函数 函数的柯里化: 通过函数连续调用继续返回函数,实现多次接受参数最后统一处理的编码方式 */ return (event)=>{ console.log(dataType, event.target.value) this.setState([dataType], event.target.value) } } //不用柯里化的实现方式 saveFormData = (dataType, event)=>{ this.setState({[dataType]: event}) } submit = (event) => { event.preventDefault(); //阻止表单默认跳转操作 const { username, password } = this.state; console.log(username, password) } render() { return ( <form onSubmit={this.submit}> {/*不用柯里化*/} 用户名:<input type="text" onChange={event=>this.saveFormData('username', event.target.value)} name="username" placeholder="请输入用户名" /> {/*用柯里化*/} 用户名:<input type="text" onChange={this.saveFormData('username')} name="username" placeholder="请输入用户名" /> 密码:<input type="password" name="password" onChange={this.saveFormData('password')} placeholder="请输入密码" /> <button>登录</button> </form> ) } } ReactDOM.render(<NotContral />, document.getElementById('test')) </script>
总结
。
这篇关于About React的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程