标签：About 函数 render isHot React state props 组件
初学者 React
文章目录
一、基本使用
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,函数,render,isHot,React,state,props,组件 来源： https://blog.csdn.net/Zmongo/article/details/118370683
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。