{}用来内嵌任何JS表达式 JSX属性 JS核心分为三大块：Es6、DOM、Window BABEL编译器：可以在线编译html语法生成对应的react语法 ** 自定义组件第一个字母大写：用于区别普通的对象 HTML被编译成了什么？ 它是一种语法糖--React.createElement() 是TeactElment对象 Props(属性) 组件就像函数一样，接受特定的输入(props),产出特定的输出(React elements) 函数格式：V=f(props) props
this.props包含由此组件的调用者定义的props。有关的介绍，请参阅道具。
特别是，它this.props.children是一个特殊的prop，通常由JSX表达式中的子标签而不是标签本身定义。
案例：【名片】安装 bootstrap npm install bootstrap --save 在入口JS文件中直接引用 ：import 'bootstrap/dist/css/bootstrap.min.css' 实列：
import React from 'react' //使用JS函数的方式定义组件 const NameCare=(props)=>{ 第一种 const {name,number,isHuman,tags}=props return ( {name}
- 电话：{number}
- {isHuman?'人类':'外星生物'}
{tags.map((tag,index)=>( {tag} ))}
) } /*class NameCare extends React.Component{第二种写法 render() { //定义值 const {name,number,isHuman,tags}=this.props return ( {name}
- 电话：{number}
- {isHuman?'人类':'外星生物'}
{tags.map((tag,index)=>( {tag} ))}
) } }*/ export default NameCare import NameCare from './Care/NameCare'//在页面中引入组件
const tags=['恐龙','足球小子']//定义数组 显示值
state：更新组件状态
状态包含特定于此组件的数据，该数据可能随时间而变化。状态是用户定义的，它应该是一个普通的JavaScript对象。
如果某些值未用于呈现或数据流(例如，计时器ID)，则不必将其置于该状态。这些值可以定义为组件实例上的字段。
有关的更多信息，请参阅。
永远不要this.state直接改变，因为setState()之后的呼叫可能会取代你所做的突变。把this.state它看作是不可变的。
实列:点赞按钮
import React from "react"; class LikesButton extends React.Component{ constructor(props){ super(props); this.state={ likes:0 } } increaseLikes(){ this.setState({ likes:++this.state.likes }) } render() { return ( ) } } export default LikesButton 生命周期 组件初始化 组件跟新 组件卸载
实列：电子钟表
import React, {useCallback} from "react"; class ElectronCycle extends React.Component{ constructor(props){ super(props) this.state={ date: new Date() } } componentDidMount() {//创建时 this.timer=setInterval(()=>{ this.setState({ date:new Date() }) },1000) } componentDidUpdate(currentState,state) { //跟新时间控制台打印 console.log(state) } componentWillUnmount() {//卸载 clearInterval(this.timer) } render() { return ( {this.state.date.toLocaleTimeString()}
) } } export default ElectronCycle; forms(表单)
实列：留言表单
*非受控组件：ref
* 不需要将状态保存在state中，直接从DOM中获取节点状态* 受控组件* forms(表单)* 表单元素和其他DOM元素的区别：* 可变状态保持在state中* 需要通过this.setState去改变的React组件为受控组件import React from "react";
//受控组件/*class CommentBox extends React.Component{ constructor(prop){ super(prop) this.state={ value:'' } this.handleChange=this.handleChange.bind(this) this.handleSubmit=this.handleSubmit.bind(this) } handleChange(event){//赋值动作 this.setState( { value:event.target.value } ) } handleSubmit(event){//提交动作 alert(this.state.value)//展示数据 event.preventDefault()//禁止组件默认的跳转动作 } render() { return( <form className="col-lg-pull-5" onSubmit={this.handleSubmit}> <div className="form-group"> <label>留言内容</label> <input type="text" className="form-control" placeholder="请输入内容" onChange={this.handleChange}//当输入的值发生事件后，会对当前输入框赋值 value={this.state.value}/>//获取输入的值 <button type="submit" className="btn btn-primary">留言</button> </div> </form> ) }}*///非受控组件class CommentBox extends React.Component { constructor(prop) { super(prop); this.handleSubmit = this.handleSubmit.bind(this) } handleSubmit(event) { alert(this.textInput.value)//直接获取DOM节点上的内容 event.preventDefault()//禁止组件默认的跳转动作 } render() { return ( <form className="col-lg-pull-5" onSubmit={this.handleSubmit}> <div className="form-group"> <label>留言内容</label> <input type="text" className="form-control" placeholder="请输入内容" ref={(textInput) => {this.textInput = textInput}} /> <button type="submit" className="btn btn-primary">留言</button> </div> </form> ) }}export default CommentBox属性、状态、生命周期
实列：
留言列表：
React开发思想：
状态提升：(lifting state up)
自上而下的数据流(top -down data flow)
单向绑定和双向绑定的区别：
由MVC引入俩个思想：
(1)用户修改数据直接反映到JS中，双向绑定：引入Angular；后简为Vue，也同时参考React实现了局部更新；
(2)只做应该改动而修改：React
MVC是对项目结构的处理，是一种开发模式；面向对象为一种编程概念；
React的单向绑定(半自动双向绑定)
推荐：用户数据单向绑定；UI数据双向绑定；
