|
创建: 2019/05/01
?
| Hello World |
| ? |
?
ReactDOM.render(
<p>sample</p>,document.getElementById(‘root‘)
);
? |
| ? |
? |
| ? |
? |
| ? |
? |
| JSX简介 |
| ?插值 |
?大括号?{}? ?● 内部可放任何JavaScript表达式
const jsxElement = <p sampleProp={0}>{buildName(people)}</p>;
? |
| ?jsx也是表达式 |
?被编译成函数 ?●?可以赋值给变量?
const buildName = (people) => {
return `${people.sex}的${people.name}`
};
const people = {
name: ‘妖怪‘,sex: ‘不男不女‘,}
const jsxElement = <p sampleProp={0}>{buildName(people)}</p>;
? |
| ?指定属性 |
?和html一样,但要用驼峰写法(因为JSX是JS) ?●?赋值可以双引号可以用插值(不要组合起来用)
// 双引号
<p sampleA="0"/>
// 插值
<p sampleB={1}/>
? |
| ?嵌套 |
?● JSX内部可以嵌套JSX
<p>测试
<a src={link.url}>{link.text}</a>
</p>
?●?对于空标签,可以?/>?结尾
const blankElement = <p/>;
? |
| ?自动转义 |
?JSX的所有内容自动转义 ?●?可以直接插入用户输入内容,不用担心安全问题 ? |
| ?JSX 表示对象 |
?Babel 会把 JSX 转译成一个名为?React.createElement()?函数调用
// JSX
const element = (
<h1 className="greeting">
Hello,world!
</h1>
);
// React.createElement
const element = React.createElement(
‘h1‘,{className: ‘greeting‘},‘Hello,world!‘
);
// 实际生成
const element = {
type: ‘h1‘,props: {
className: ‘greeting‘,children: ‘Hello,world!‘
}
};
? |
| ? |
? |
| 元素渲染 |
| ? |
? |
| ? |
? |
| ? |
? |
| ? |
? |
| 组件&Props |
| ? |
? |
| ? |
? |
| ? |
? |
| ? |
? |
| state&生命周期 |
| ? |
? |
| ? |
? |
| ? |
? |
| ? |
? |
| 事件处理 |
| ? |
? |
| ? |
? |
| ? |
? |
| ? |
? |
| 条件渲染 |
| ? |
? |
| ? |
? |
| ? |
? |
| ? |
? |
| 列表&key |
| ? |
? |
| ? |
? |
| ? |
? |
| ? |
? |
| 表单 |
| ? |
? |
| ? |
? |
| ? |
? |
| ? |
? |
| 状态提升 |
| ? |
? |
| ? |
? |
| ? |
? |
| ? |
? |
| 组合&继承 |
| ? |
? |
| ? |
? |
| ? |
? |
| ? |
? |
| React哲学 |
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
