1.react的简单使用
<!DOCTYPE html>
<html lang=en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title>React的简单使用</title>
<body>
<div id="root"></div>
<script type="text/babel">
class Person extends React.Component{
render(){
return (
<div>
<h1> Hello {this.props.name} </h1>
</div>
)
}
}
ReactDOM.render(<Person name="张三"/>,document.getElmentById('root'))
</script>
</body>
</html>
2.创建虚拟DOM的到页面的两种方式
方式1（推荐）
<script type="text/baebl">
const VDOM = <h1> hello world </h1>
ReactDOM.render(VDOM,document.getElementById('root'))
</script>
方式2
<script type="text/javascript">
const VDOM = React.createElement('h1',{id:'title'},'hello,world')
ReactDOM.render(VDOM,document.getElementById('root'))
</script>
关于虚拟DOM：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需正式DOM那么多属性
JSX的语法规则：
1.定义虚拟DOM时，不能写引号
2.标签混入js表达式时需要用{}
3.样式的类名指定不要用class，要用className
4.内联样式，style需要{{}}，对象包含对象，font-size 要用fonSize
5.只能有一个根容器标签
6.单标签必须加 / ，标签必须闭合，举例：<input /> <h1></h1>
7.标签首字母：
(1)、若小写字母开头，则将该标签转为html 中同名元素标签，若html中无该对应的同名元素，则报错
(2)、若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
3.js语句（代码）与js表达式的区别
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
表达式举例：
a
a + b
demo()
arr.map()
function test(){}
2.js语句（代码）
语句举例：
if(){}
for(){}
switch(){case:xxx}
4.模块与组件
1.模块：
理解：向外提供特定功能的js程序，一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
作用：复用js，简化js的编写，提高js的运行效率
定义：当应用的js都以模块来编写的，这个应用就是一个模块化的应用
2.组件：
理解：用来实现局部功能效果的代码和资源的集合（HTML/css/image）
为什么：一个界面的功能更复杂。
作用：复用编码，简化项目编码，提高运行效率
定义：当应用是以多组件的方式实现，这个应用就是一个组件化的应用
5.创建组件的两种方式
1.函数式创建组件：
<script type="text/babel">
function MyCompontent(){
console.log(this)
return <h2>我是用函数定义的组件</h2>
}
ReactDOM.render(<MyComponent />,document.getElementById('root'))
</script>
函数式创建组件过程分析：
a.react解析组件标签，找到了MyComponent组件
b.发现组件使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM随后呈现在页面中。
2.类的复习
class Person{
constructor(name,age){
this.name = name
this.age =age
}
speak(){
console.log(`我叫${this.name}`)
}
}
const p1 = new Person('张三',18)
p1.speak()
class Student extends Person{
constructor(name,age,grade){
super(name,age)
this.grade = grade
}
}
const s1 = new Student('小张',18,3)
s1.speak()
类复习总结：
1.类中的构造器不是必须写的，要对实例进行初始化操作，如添加指定属性时才写。
2.如果A类继承了B类，且A类中写了构造器，A类构造器中的super是必须要调用的
3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。
类式创建组件
<script type="text/babel">
class MyComponent extends React.Component{
render(){
<h2>我是类定义的组件</h2>
}
}
ReactDOM.render(<MyComponent />,documentById('root'))
</script>
类式创建组件，执行ReactDOM.render(<MyComponent />,document.getElementById(‘root’))之后，分析过程：
1.react解析组件标签，找到了MyComponent组件
2.发现组件是使用类定义的，随后new出来该实例，并通过该实例调用到原型上的render方法
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面当中，render中的this是谁？MyComponent的实例对象。
小练习：点击h1标签切换今天天气怎么样？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Weather extends React.Component{
constructor(props){
super(props)
this.state = {
isHot:false
}
}
changeWeather = ()=>{
this.setState({
isHot:!this.state.isHot
})
}
render(){
const {isHot} = this.state
return(
<h1 onClick={this.changeWeather}>
今天天气很{isHot ? '炎热' :'凉爽'}
</h1>
)
}
}
ReateDOM.render(<Weather />, document.getElementById('root'))
</script>
</body>
</html>
6.props的使用方式
类的创建组件方式：
<script type="text/babel">
class Person extends React.Component{
render(){
console.log(this)
const {name,sex,age} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex} </li>
<li>年龄：{age} </li>
</ul>
)
}
}
ReactDOM.render(<Person name="TOM" sex="男" age="18" />,document.getElementById('root'))
</script>
扩展：
function sum(...numbers){
return numbers.reduce((preValue,currentValue)=>{
return preValue +currentValue
})
}
console.log(sum(1,2,3,4)
let person2 = {...person}
let person2 = JSON.stringfy(person)
person2 = JSON.parse(person2)
props的限制：
第一种 类式创建组件的方式限制：
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script type="text/babel">
class Person extends React.Component{
render(){
const {name,age,sex} = this.state
return (
<ul>
<li>姓名：{name} </li>
<li>性别：{sex} </li>
<li>年龄：{age} </li>
</ul>
)
}
}
Person.propTypes = {
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropType.number
}
Person.defaultProps = {
sex:'未知',
age:18
}
ReactDOM.render(<Person name="TOM" />,document.getElementById('root'))
第二种简写方式（放置组件内部）
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script typw="text/babel">
class Person extends React.Component{
static propTypes = {
name:PropTypes.string.isRequired,
sex:PropsTypes.string,
age:PropTypes.number
}
static defaultProps = {
sex:'未知',
age:18
}
render(){
const {name,age,sex} = this.state
return (
<ul>
<li>姓名： {name} </li>
<li>性别：{sex} </li>
<li>年龄：{age} </li>
<ul>
)
}
}
ReactDOM.render(<Person name="tom" />,document.getElmentById('root'))
</script>
扩展知识：
类式组件的构造器与props
构造器是否接收props,是否传递给super，取决于：是否希望在构造器中通过this访问props
constructor(props){
super(props)
console.log('constructor',this.props)
}
函数创建组件限制props方式：
function Person(props){
return (
const {name,age,sex} = props
<ul>
<li>姓名：{name}</li>
<li>性别：{sex} </li>
<li>年龄：{age} </li>
</ul>
)
}
Person.propTypes = {
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number
}
Person.defaultProps = {
sex:'未知',
age:18
}
ReactDOM.render(<Person name="TOM" sex="男" age=18 / >,document.getElementById('root'))
|