react
react和vue的思想有点分离,vue讲究的是逻辑层和渲染层分离,react则是理解两者为一种耦合
在react中jsx是一种将js和html结合起来的语法,但是实际上进行编译的时候html会被转成js,只是写成jsx更加的直观
最后将这些js渲染到根节点上,这就意味这必须要有根节点,然后利用reactdom.render(element,document.getElementById(‘root’)),其中reactdom就是相当于代理者,将element渲染到dom树上
但是如果纯用js来进行构造页面就会显得很虚,就是不清楚具体到底是咋样的,这个偏向于后端和前端都很熟的情况下,运用的还是对象的思想
因为jsx直观上就是html和js结合
在js中存在着变量和函数这两大块,所以具体结合
function welcome(props){
return <h1>hello,{props.name}</h1>
}
上面等同于下面
class welcome extends React.Component{
render(){
return <h1>hello,{this.props.name}</h1>
}
}
自定义组件,就是所谓的,下面会把name传递到welcome里面的props里面中
function welcome(props){
return <h1>hello,{props.name}</h1>
}
const element=<welcome name="sara">
reactDom.render(
element,
document.getElementById('root')
)
组合组件
function welcome(props){
return <h1>hello,{props.name}</h1>
}
function App(){
return (
<div>
<welecome name="Sara">
<welecome name="Cahal">
<welecome name="Edite">
</div>
)
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
而且这个可以反复的组合,就是组件套组件。。。。。。
Props的只读性
组件无论是函数声明还是class声明,都绝对不能改变自身的props