一.jsx
1.定义虚拟DOM时，不要写引号
2.标签中混入JS表达式时要用{}
3.样式的类名指定不要用class，要用className
4.内联样式,要用style={{key:value}}的形式去写
5.标签必须只有一个跟标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应得同名元素，则报错
(2).若大写字母开头，react就去渲染对应得组件，若组件没有定义，则报错
二.函数式组件
//1.创建函数式组件
function MyComponent(){
console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式
return 我是用函数定义的组件(使用于[简单组件]的定义)
}
//2.渲染组件到页面
ReactDOM.render(三.类式组件
//1.创建类式组件
class MyComponent extends React.Component{
//render是放在哪里的？--MyComponent的原型对象上，供实例使用
//render中的this是谁？--MyComponent的实例对象 <=>MyComponent组件实例对象
render(){
console.log('render中的this',this)
return 我是用类定义的组件(使用于【复杂组件的定义】)
}
}
//2.渲染组件到页面
ReactDOM.render(四.组件实例三大属性state
//1.创建类式组件
class Weather extends React.Component{
//初始化状态
state = {isHot:false,wind:'微风'}
render(){
const {isHot,wind} = this.state
return 今天天气很{this.state.isHot?'炎热':'凉爽'},{wind}
}
//自定义方法----要用赋值语句的形式+箭头函数
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(五.组件实例三大属性props
1.类式组件
//1.创建类式组件
class Person extends React.Component{
constructor(props){
//构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props
super(props)
console.log('constructor',this.props)
}
//对标签属性进行类型，必要性限制
static propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值
static defaultProps = {
sex:'不男不女',
age:18
}
render(){
const {name,sex,age} = this.props
//props是只读的
this.props.name = 'jack' //此行代码会报错，因为props是只读的
return (
- 姓名:{name}
- 性别:{sex}
- 年龄:{age}
)
}
}
//2.渲染组件到页面
ReactDOM.render(2.函数组件
//创建组件
function Person (props){
const {name,age,sex} = props
return (
- 姓名：{name}
- 性别：{sex}
- 年龄：{age}
)
}
Person.propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值
Person.defaultProps = {
sex:'男',//sex默认值为男
age:18 //age默认值为18
}
//渲染组件到页面
ReactDOM.render(六.组件实例三大属性refs
回调形式ref
//创建组件
class Demo extends React.Component{
state = {isHot:false}
showInfo = ()=>{
const {input1} = this
alert(input1.value)
}
changeWeather = ()=>{
//获取原来的状态
const {isHot} = this.state
//更新状态
this.setState({isHot:!isHot})
}
saveInput = (c)=>{
this.input1 = c;
console.log('@',c);
}
render(){
const {isHot} = this.state
return(
今天天气很{isHot ? '炎热':'凉爽'}
{/*{this.input1 = c;console.log('@',c);}} type="text"/>
*/}
)
}
}
//渲染组件到页面
ReactDOM.render(/* React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的 */
myRef = React.createRef()
myRef2 = React.createRef()
七.事件处理
//创建组件
class Demo extends React.Component{
/*
(1).通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref
*/
//创建ref容器
myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData = (event)=>{
console.log(event,event.target);
alert(this.myRef.current.value);
}
//展示右侧输入框的数据
showData2 = (event)=>{
alert(event.target.value);
}
render(){
return(
)
}
}
八.非受控组件和受控组件
在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。
要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据。
1.非受控组件
class Login extends React.Component{
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this
alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
}
render(){
return(
)
}
}
2.受控组件
在 HTML 中，表单元素（如、