React文档笔记

注：前半段为今天学习的Jsx文档， 后半段就有一些稍杂一些的React官方文档(核心篇1-8总结)若有兴趣能够看看。

React JSX

jsx是一种javascript的语法扩展，jsx用来声明React当中的元素。Jsx对象表示:Babel会把Jsx转译为一个React.createElement()函数调用.例:

const element=(
    ①
    <h1 className="getting">Hello.world</h1>
    👇从①到②
    ②
    const element=React.createElement(
        'h1',
        {className='getting'},
        'hello.world'
    )
);
---------------------------------------------------------------------------------------
                                    分界线
---------------------------------------------------------------------------------------
const element=<h1>Hello World!</h1>
这个变量的声明   
复制代码

这种语法被称为JSX，是Javascript的一种扩展语法。咱们推荐在React中使用JSX去编写咱们的UI界面。也许你会以为JSX很像是模板语言，可是它具备JavaScript的所有功能。

React信奉渲染逻辑与UI逻辑是自然耦合的：如何处理事件，状态如何随着时间变化以及数据如何显示在页面上。React用被称为“组件”的松散的耦合单元（同时包含标签代码与逻辑代码）来代替手动地将标签与代码逻辑分散在不懂的文件里。咱们将会在接下来的介绍里介绍组件。 React不强制要求使用JSX，可是大部分开发者在开发时发现将UI标签放在JavaScript代码里对观察代码渲染十分有帮助。固然，使用JSX能在开发时向开发者显示更多游泳的错误和警告信息

JSX基本语法

1. 定义标签哈斯，只容许被一个标签包裹
2. 标签必定要闭合
3. 若是使用数据形式，必须对数组中的每个元素都要给一个惟一的key值
4. 元素若是是小写首字母则是元素，若是是大写首字母则是组件元素
5. 注释须要用{}包裹
6. 咱们也可使用命名空间的方式以解决组件相同名称冲突的问题
7. JSX中，咱们必须使用驼峰的形式来书写事件的属性名
8. 属性值要使用表达式；只要将{}来替换“”
9. 传入数据的展开性{…props}
10. for属性改为htmlFor
11. class属性改成className

在编译以后，jsx其实会被转化为普通的javascript对象。这也就意味着能够下if或者for语句里使用JSX，将它复制被变量当作参数传入，做为返回值均可以：

function getGreeting(user){
if(user){
    return  <h1>hello,{formatName(user)}</h1>;
}
return  <h1>hello,Stranger</h1>;
}
复制代码

JSX属性

可使用引号来定义以字符串为值的属性：const element=<div tabIndex='0'></div>;
也可使用大括号来定义以javascript表达式为值得属性：const element=<img src={user.avatarUrl}></img>;
使用了大括号包裹的javascript表达式时就不要再到外面套引号了。JSX会将引号当中的内容识别为字符串而不是表达式。
复制代码

JSX嵌套

若是Jsx标签是闭合式的，那么你须要在结尾处使用/>,就好像XML/HTML同样：const element = <img src={user.avatatUrl}/>
复制代码

JSX标签一样能够相互嵌套：

const element = {
 <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
}
注意：JSX的特性更接近javascript而不是HTML，因此ReactDOM使用camelCase小驼峰命名来定义属性的名称，而不是使用HTML的属性名称。
复制代码

记录：

组件名必须以大写字母开头/用户定义组件必须首字母大写

当元素类型以小写字母开头时，它表示一个内置的组件，如 <div> 或 <span>，将致使字符串 'div' 或 'span' 传递给 
React.createElement。 以大写字母开头的类型，如 <Foo /> 编译为 React.createElement(Foo)，
而且它正对应于你在 JavaScript 文件中定义或导入的组件。
复制代码

全部React组件都必须像纯函数同样保护Props不被改

“纯函数” 不会尝试修改入参，屡次调用结果仍不变。

※（老版本）React页面只要有参数值为“html”，如用户名为html则挂页

元素是构成React的最小砖块->与浏览器Dom不一样，React元素是建立小开销的对象,React.Dom负责更新Dom与React元素保持一致