初步接触react----记录

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