创建: 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哲学 | |