因为公司接下来的项目用到React,所以最近跟着尚硅谷视频学习,框架之中有相通之处,所以在学习React时不时与Vue进行对比。
1.jsx
React 中使用可以使用 JSX 来替 代JavaScript,下面是在React框架中使用jsx的一个例子
<!-- 准备好一个“容器” -->
<div id="test"></div>
//1.创建虚拟DOM
const VDOM = (
<div>
<h1 className='title'>
<span style= {{color:'white'}} >{a.toLocaleLowerCase()}</span>
</h1>
<h1 className='title'>
<span style= {{color:'white'}} >{a.toLocaleLowerCase()}</span>
</h1>
<input type="text"/>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
在React框架中使用jsx创建的虚拟dom节点,挂在到页面容器中,其中不难看出jsx有以下语法规则:
1.只有一个根标签,例子中的根标签为div |
2.标签中混入JS表达式时要用{},与Vue中的{{}}双花括号作用类似 |
3.样式的类名指定不再使用原生js中的class,用className |
4.内联样式,要用style={{key:value}}的形式去写,这倒是和Vue一样 |
5.标签首字母 (1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。 (2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。 |
2.组件
在React中组件分为函数式组件和类组件,下面是分别使用其创建组件的例子
//1.创建函数式组件
function Demo (){
return <h1>黄同学不会前端</h1>
}
//2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。
*/
// 使用类组件需要继承React中的Component类
class MyComponent extends React.Component{
render(){
// 类组件中的render方法中的this指向组件实例
console.log("render中的this",this);
return <h2>黄同学不会前端</h2>
}
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
*/
创建类组件与函数式组件相比,需要继承React中的Component类,且需要将要渲染的虚拟dom节点放在render()中,render函数是组件生命周期的一部分,后面讲到组件的生命周期会着重去讲。
在这里,React中的组件与Vue中的组件意义有所不同,且创建方式也有不一样,Vue中的组件,更多是指封装公用部分,以达到复用的效果,无需像React中创建虚拟dom再渲染成真实dom。
3.组件实例三大属性
1.state
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面。
//1.创建组件
class Weather extends React.Component{
//初始化状态
state = {isHot:false,wind:'微风'}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
}
//自定义方法————要用赋值语句的形式+箭头函数
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
这里需要注意的是自定义方法changeWeather使用赋值语句+箭头函数的书写方式,箭头函数没有this指向,向外围寻找到Weather实例,所以其可以访问state中的数据,在state中初始化
状态,changeWeather方法中使用setState修改状态。
2.props
state 和 props 主要的区别在于 props 是不可变的,而子组件只能通过 props 来传递数据。
在类组件中使用props
class Person extends React.Component {
render(){
console.log(this);
return (
<ul>
<li>姓名:{this.props.name}</li>
<li>年龄:{this.props.age}</li>
<li>性别:{this.props.sex}</li>
</ul>
)
}
}
// 对传进组件中的标签属性进行限制
Person.propTypes= {
name:PropTypes.string.isRequired, //限制文件必传
age:PropTypes.number,
speak:PropTypes.func
}
// 对传进组件中的标签属性设置默认值
Person.defaultProps ={
sex:'男'
}
ReactDOM.render(<Person name='hzj' age={18} speak={speak}/>, document.getElementById('test'))
function speak(){
console.log(name);
}
组件中使用标签属性键值对方法传入数据,使用可以使用propTypes和defaultProps对传进组件中的标签属性进行限制和设置默认值。
3.Refs
React 支持一种 Ref 绑定到 render() 输出的组件上,形式有三种:字符串形式的ref,回调函数形式中的ref,以及createRef
1.字符串形式
class Demo extends React.Component{
// 展示左侧输入框的数据
showInfo = ()=>{
const {input1} =this.refs
console.log(input1.value);
}
// 展示右侧输入框的数据
showInfo1 = ()=>{
const {input2} =this.refs
console.log(input2.value);
}
render(){
return(
<div>
<input ref='input1' type='text' placeholder='点击按钮提示左侧数据'></input>
<button onClick={this.showInfo}>点击</button>
<input ref='input2' type='text' onBlur={this.showInfo1} placeholder='失去焦点提示'></input>
</div>
)
}
}
ReactDOM.render(<Demo />,document.getElementById('test'))
组件中使用ref=’‘,挂载到组件实例中refs中,即可获取组件dom节点实例
2.回调函数形式
class Demo extends React.Component{
// 展示左侧输入框的数据
showInfo = ()=>{
const {input1} =this
console.log(input1.value);
}
// 展示右侧输入框的数据
showInfo1 = ()=>{
const {input2} =this
console.log(input2.value);
}
render(){
return(
<div>
<input ref={c =>this.input1 = c} type='text' placeholder='点击按钮提示左侧数据'></input>
<button onClick={this.showInfo}>点击</button>
<input ref={c =>this.input2 = c} type='text' onBlur={this.showInfo1} placeholder='失去焦点提示'></input>
</div>
)
}
}
ReactDOM.render(<Demo />,document.getElementById('test'))
3.createRef
class Demo extends React.Component{
// ref容器
myRef1 =React.createRef()
myRef2 =React.createRef()
// 展示左侧输入框的数据
showInfo = ()=>{
console.log(this.myRef1.current.value);
}
// 展示右侧输入框的数据
showInfo1 = ()=>{
console.log(this.myRef2.current.value);
}
render(){
return(
<div>
<input ref={this.myRef1} type='text' placeholder='点击按钮提示左侧数据'></input>
<button onClick={this.showInfo}>点击</button>
<input ref={this.myRef2} type='text' onBlur={this.showInfo1} placeholder='失去焦点提示'></input>
</div>
)
}
}
ReactDOM.render(<Demo />,document.getElementById('test'))