react的知识点有哪些-mile米乐体育
react的知识点有哪些
这篇文章主要介绍了react的知识点有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react的知识点有哪些文章都会有所收获，下面我们一起来看看吧。
组件的数据挂载方式，属性(props)props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的props
属性是描述性质、特点的，组件自己不能随意更改。
之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件props对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props:
importreact,{component,fragment}from'react'importreactdomfrom'react-dom'classtitleextendscomponent{
render(){
return(
<h2>欢迎进入{this.props.name}的世界</h2>
)
}}constcontent=(props)=>{
return(
<p>{props.name}是一个构建ui的库</p>
)}classappextendscomponent{
render(){
return(
<fragment>
<titlename="react"/>
<contentname="react.js"/>
</fragment>
)
}}reactdom.render(
<app/>,
document.getelementbyid('root'))
设置组件的默认props
importreact,{component,fragment}from'react'importreactdomfrom'react-dom'classtitleextendscomponent{
// 使用类创建的组件，直接在这里写static方法，创建defaultpropsstaticdefaultprops={
name:'react'
}
render(){
return(
<h2>欢迎进入{this.props.name}的世界</h2>
)
}}constcontent=(props)=>{
return(
<p>{props.name}是一个构建ui的库</p>
)}// 使用箭头函数创建的组件，需要在这个组件上直接写defaultprops属性content.defaultprops={
name:'react.js'}classappextendscomponent{
render(){
return(
<fragment>
{/* 由于设置了defaultprops， 不传props也能正常运行，如果传递了就会覆盖defaultprops的值 */}
<title/>
<content/>
</fragment>
)
}}reactdom.render(
<app/>,
document.getelementbyid('root'))
props.children
我们知道使用组件的时候，可以嵌套。要在自定义组件的使用嵌套结构，就需要使用props.children。在实际的工作当中，我们几乎每天都需要用这种方式来编写组件。
importreact,{component,fragment}from'react'importreactdomfrom'react-dom'classtitleextendscomponent{
render(){
return(
<h2>欢迎进入{this.props.children}的世界</h2>
)
}}constcontent=(props)=>{
return(
<p>{props.children}</p>
)}classappextendscomponent{
render(){
return(
<fragment>
<title>react</title>
<content><i>react.js</i>是一个构建ui的库
</fragment>
)
}}reactdom.render(
<app/>,
document.getelementbyid('root'))
使用prop-types检查props
react其实是为了构建大型应用程序而生, 在一个大型应用中，根本不知道别人使用你写的组件的时候会传入什么样的参数，有可能会造成应用程序运行不了，但是不报错。为了解决这个问题，react提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types:
$ npm i prop-types -s
状态(state)
状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
定义state
第一种方式
importreact,{component}from'react'importreactdomfrom'react-dom'classappextendscomponent{
state={
name:'react',
isliked:false
}
render(){
return(
<div>
<h2>欢迎来到{this.state.name}的世界</h2>
<button>
{
this.state.isliked?'❤️取消':' 收藏'
}
</button>
</div>
)
}}reactdom.render(
<app/>,
document.getelementbyid('root'))
另一种方式(推荐)
importreact,{component}from'react'importreactdomfrom'react-dom'classappextendscomponent{
constructor(){
super()
this.state={
name:'react',
isliked:false
}
}
render(){
return(
<div>
<h2>欢迎来到{this.state.name}的世界</h2>
<button>
{
this.state.isliked?'❤️取消':' 收藏'
}
</button>
</div>
)
}}reactdom.render(
<app/>,
document.getelementbyid('root'))
this.props和this.state是纯js对象,在vue中，data属性是利用object.defineproperty处理过的，更改data的数据的时候会触发数据的getter和setter，但是react中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setstate。
setstate
isliked存放在实例的state对象当中，组件的render函数内，会根据组件的state的中的isliked不同显示“取消”或“收藏”内容。下面给button加上了点击的事件监听。
importreact,{component}from'react'importreactdomfrom'react-dom'classappextendscomponent{
constructor(){
super()
this.state={
name:'react',
isliked:false
}
}
handlebtnclick=()=>{
this.setstate({
isliked:!this.state.isliked
})
}
render(){
return(
<div>
<h2>欢迎来到{this.state.name}的世界</h2>
<buttononclick={this.handlebtnclick}>
{
this.state.isliked?'❤️取消':' 收藏'
}
</button>
</div>
)
}}reactdom.render(
<app/>,
document.getelementbyid('root'))
setstate有两个参数
第一个参数可以是对象，也可以是方法return一个对象，我们把这个参数叫做updater
·参数是对象
this.setstate({
isliked:!this.state.isliked})
·参数是方法
this.setstate((prevstate, props) => {
return {
isliked: !prevstate.isliked
}
})
注意的是这个方法接收两个参数，第一个是上一次的state, 第二个是props
setstate是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数
this.setstate((prevstate,props)=>{
return{
isliked:!prevstate.isliked
}},()=>{
console.log('回调里的',this.state.isliked)})console.log('setstate外部的',this.state.isliked)
属性vs状态
相似点：
都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）
不同点：
00001.属性能从父组件获取，状态不能
00002.属性可以由父组件修改，状态不能
00003.属性能在内部设置默认值，状态也可以
00004.属性不在组件内部修改，状态要改
00005.属性能设置子组件初始值，状态不可以
00006.属性可以修改子组件的值，状态不可以
state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为state是一个局部的、只能被组件自身控制的数据源。state中状态可以通过this.setstate方法进行更新，setstate会导致组件的重新渲染。
props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的props，否则组件的props永远保持不变。
如果搞不清state和props的使用场景，记住一个简单的规则：尽量少地用state，多用props。
没有state的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。
##状态提升
如果有多个组件共享一个数据，把这个数据放到共同的父级组件中来管理
受控组件与非受控组件
react组件的数据渲染是否被调用者传递的props完全控制，控制则为受控组件，否则非受控组件。
渲染数据
·条件渲染
{
condition?'❤️取消':' 收藏'}
·列表渲染
// 数据constpeople=[{
id:1,
name:'leo',
age:35},{
id:2,
name:'xiaoming',
age:16}]// 渲染列表{
people.map(person=>{
return(
<dlkey={person.id}>
<dt>{person.name}</dt>
<dd>age:{person.age}</dd>
</dl>
)
})}
react的高效依赖于所谓的 virtual-dom，尽量不碰 dom。对于列表元素来说会有一个问题：元素可能会在一个列表中改变位置。要实现这个操作，只需要交换一下 dom 位置就行了，但是react并不知道其实我们只是改变了元素的位置，所以它会重新渲染后面两个元素（再执行 virtual-dom ），这样会大大增加 dom 操作。但如果给每个元素加上唯一的标识，react 就可以知道这两个元素只是交换了位置，这个标识就是key，这个key必须是每个元素唯一的标识
·dangerouslysethtml
对于富文本创建的内容，后台拿到的数据是这样的：
content="
react.js是一个构建ui的库
"处于安全的原因，react当中所有表达式的内容会被转义，如果直接输入，标签会被当成文本。这时候就需要使用dangerouslysethtml属性，它允许我们动态设置innerhtml
importreact,{component}from'react'importreactdomfrom'react-dom'classappextendscomponent{
constructor(){
super()
this.state={
content:"
react.js是一个构建ui的库
"}
}
render(){
return(
<div
// 注意这里是两个下下划线 __htmldangerouslysetinnerhtml={{__html:this.state.content}}
/>
)
}}reactdom.render(
<app/>,
document.getelementbyid('root'))
事件处理
绑定事件
采用on 事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, react里的事件是驼峰onclick，react的事件并不是原生事件，而是合成事件。
事件handler的写法
·直接在render里写行内的箭头函数(不推荐)
·在组件内使用箭头函数定义一个方法(推荐)
·直接在组件内定义一个非箭头函数的方法，然后在render里直接使用>(不推荐)
·直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)
event 对象
和普通浏览器一样，事件handler会被自动传入一个event对象，这个对象和普通的浏览器event对象所包含的方法和属性都基本一致。不同的是 react中的event对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有event.stoppropagation、event.preventdefault这种常用的方法
事件的参数传递
·在render里调用方法的地方外面包一层箭头函数
·在render里通过this.handleevent.bind(this, 参数)这样的方式来传递
·通过event传递
·比较推荐的是做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用
##处理用户输入
importreact,{component}from'react'importreactdomfrom'react-dom'classappextendscomponent{
constructor(){
super()
this.state={
xing:'',
ming:''
}
}
handleinputchange=(e)=>{
this.setstate({
[e.target.name]:e.target.value
})
}
render(){
const{
xing,
ming
}=this.state
return(
<div>
<label>
<span>姓:</span>
<input
type="text"
name="xing"
value={xing}
onchange={this.handleinputchange}
/>
</label>
<label>
<span>名:</span>
<input
type="text"
name="ming"
value={ming}
onchange={this.handleinputchange}
/>
</label>
<p>欢迎您:{xing}{ming}</p>
</div>
)
}}reactdom.render(
<app/>,
document.getelementbyid('root'))
关于“react的知识点有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“react的知识点有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道。