React框架自我整理和精简（一）12.7

     经过几个月的时间，完成了React框架的PC的项目需求编写。和Angular框架下的ionic混合式APP需求编写。现在开始返回回顾对应框架中文文档。并希望在接下来的时间，整理相应的点，并连贯成一个成结构的知识体系。把原有的文档精简，变薄。计划是分阶段的，刚开始的内容会倾向于整理和梳理React中文文档中的内容和知识，并添加自己在实际工作中的想法和经验，将有关联的知识点链接起来。

    一、简单的jsx
funciton demoTest(user){
    return user.firstName+' '+user.lastName;
}
const user={
firstName:'Harper',
lastName:'Perez',
}
const element={
<h1>
      Hello,{formaName(user)};
</h1>
};
ReactDom.render(
element,document.getElementById)
)

    二、JSX防止注入攻击以及TypeScript的三种写法
在渲染所有输入内容，在渲染前会默认转义为字符宣传，可以有效防XSS注入攻击
const element=(
<h1 className="greeting">
 Test Demo
</h1>)
const element=React.createElement(
'h1',
{className:'greeting'},
'Hello,world!'
)
const element=React.creatElement(//实际生成的对象简化后的结构
type:'h1',
'prop':{
className:'greeting',
children:'Hello,world!'
}
)
    这些是"React元素"，通过读取这些元素。 React用来构件元素对象。 使用它们
来构建Dom保持随时更新。 React元素的开销相当小，不同于Dom元素的开销.
    三、渲染界面相应的元素
const element="<h1>Test React</h1>"
ReactDom.render(element,document.getElementById('root'))
 (1)将相应的节点一起传入ReactDom.render()中,进入相应节点树后进入了相应的节点。
 (2)React元素是不可变对象，所以一旦创建。 就无法被更改。代表着某个特定时刻的UI
更新UI的唯一的方式是创建以恶搞全新的元素，并将它传入相应的ReactDOM.render()中
 每次更新完之后都会新建一个新的DOM节点树。对比对应的节点，更新相应的节点。
    四、两种组件
function testDemo(props){
return<h1>Hello,{props.name}</h1>
}
class testDemo extends React.Component{
constructor(props){
super(props);
this.handlechange=this.handleChange.bind(this);
this.state={temperature:''};
}
render(){
return <h1>
Hello,{this.props.name};
</h1>}
}
对比两种组件，其实本质上都是方法传入对象。 写法不一样，传入dom节点的对象
{type:
prop{
className:"",
children:""
}
}
   这两种组件:函数组件、class组件

大部分情况下的执行方式分为以下步骤：
(1)调用相应的ReactDOM.render()函数，并传入对应的渲染的<Welcome name="Sa">
作为参数
(2)React调用相应的组件，在组件内部传入{name:'sa'}作为props传入
(3)对应的组件返回一个元素值，最后根据元素值创建一个新的节点树。
(4)对应的节点树，对比更改后的节点，并完成已经变化了的节点的dom节点的渲染和变化.