一、jsx
1、 Script 类型一定要为 text/babel
<script type="text/babel"></script>
2、解析规则
- 遇到 <> 开头的代码以标签的语法解析 html同名的转换成html元素 其他标签需要特别解析
- jsx 页面里边想要解析 js 代码 必须要写在 {} 里边
- 使用 ReactDOM.render 方法将 react 元素渲染在根节点里
<body> <div id='root'></div> //必须有根节点 </body> // react 核心库 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> // 提供操作dom的react扩展库 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> // 解析jsx语法的库 <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script> // type类型必须为 'text/babel' <script type='text/babel'> const str = 'hello world' const vDom = <h1>{str}</h1> //下边为渲染jsx语法方法(一般来说页面只调用一次) ReactDOM.render(vDom,document.getElementById('root')) </script>
二、React 组件
1、react 有两种组件形式
- 函数组件
- 类组件
// 函数组件 function Com1() { //必须为大写字母开头 return <h1>hello world</h1> } ReactDOM.render(<Com1 />,document.getElementById('root1')) // 类组件 (需要继承react.component) class Com2 extends React.component { //必须以大写字母开头 render() { return ( // 多行标签写在()里,return后不可直接换行 <div> <h1>hello cz1</h1> <h1>hello cz2</h1> </div> ) } } ReactDOM.render(<Com2 />,document.getElementById('root2')) //渲染组件 需要用尖括号<>将组件名称包裹起来并含有闭合标签
注意事项
- 注意组件的命名一定要是 大写字母 开头
- 注意如果组件返回多个标签,那么多个标签需要被一个根标签包裹,一个组件有且只有一个根标签
- 渲染组件在 ReactDOM.render 里需要用尖括号 <> 将组件名称(首字母大写)包裹起来并含有闭合标签
- return 后边不能直接换行,否则会以没有渲染内容报错,如内容过多,可写在 () 里
2、类组件和函数组件的区别
类组件
- 可以访问this对象
- 有可以更新渲染页面的数据状态-state
- 可以访问输入的props
- 可以访问生命周期的方法
函数组件
- 组件不会被实例化,渲染性能提高
- 只能访问输入的props,没有state
- 组件不能访问生命周期的方法
- 组件不能访问this对象
3、state 用来更新渲染页面的数据状态 (类组件才拥有state)
- 类组件才拥有state,所以只有类组件才能动态更新视图
- 如果类组件需要定义自己的构造函数,一定要在构造函数的第一行通过super()调用父类,也就是React.Component的构造函数(构造函数可省略)
- 如果在构造函数中没有调用super(),那么组件实例被构造之后,类实例的所有成员就无法通过this.props访问到父组件传递过来的props值
- 在方法里要改变state的值需要调用 this.setState()方法
- 在render中需要覆盖state的值不需要调用setState方法,可直接通过this.state直接赋值,注意,在render中给state赋值,将会覆盖state之前任何时刻的值(如果你需要的话,实际上没人会这么做,了解即可)
class Com extends React.Component { constructor(props) { //构造函数 可省略,默认调用 super(props) //只要是继承的类写构造函数必须要调用super() this.state={ //初始化state,在这里合并props name:props.name } } //相当于调用构造函数里的this.state,初始化state,可省略构造函数 state={ name:props.name } fun=()=>{ this.setState({ // 在方法里要改变state的值需要调用setState()方法 name:'更新的值' }) } render(){ return <h1>{this.state.name}</h1> } }
4、props 父组件向子组件传值
// 函数组件props传值
function Com1(props) {
return <h1>{props.name}</h1>
}
//类组件props传值
class Com2 extends React.Component{
render(){
return <h1>{this.props.name}</h1>
}
}
class App extends React.Component{
render(){
return (
<div>
<Com1 name='我是函数组件'/>
<Com2 name='我是类组件' />
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
//渲染组件 需要用尖括号<>将组件名称包裹起来并含有闭合标签
5、子组件向父组件传值
- 在父组件中给子组件Com1传递一个名为appSubmit的方法,对应父组件中的submit方法
- 在子组件Com1中由 comSubmit 方法触发通过props传递过来的appSubmit方法并传递参数
- 在父组件 submit 方法中拿到子组件Com1传递的参数
class Com1 extends React.Component{ comSubmit=()=>{ //调用父组件传递过来的方法并传递参数,对应父组件中的submit方法 this.props.appSubmit('参数') } render(){ return <button onClick={this.comSubmit}>向父组件传递参数</button> } } class App extends React.Component{ // 当子组件Com1触发父组件传递的appSubmit方法后,就触发了该方法 submit=(val)=>{ console.log(val) // 拿到子组件传递过来的参数 } render(){ // 将父组件submit方法以appSubmit为名传递到子组件Com1中 // 实际上子组件Com1中获取的appSubmit方法就是父组件的submit方法 return <Com1 appSubmit={this.submit} /> } }
6、子组件向子组件传值
- 先让子组件A向父组件传值
- 再把父组件从子组件A中接收的参数通过props传递给子组件B
三、受控组件和非受控组件(收集表单数据)
1、受state控制的为受控组件
- 通过state来控制表单元素
- 随着用户输入进行更新
class Com extends React.Component{ state={ // 相当于构造函数里的this.state name:'' } getInput=(e)=>{ let val = e.target.value this.setState({ // 更新state name:val }) } render(){ // 把表单的值和state的值绑定,再通过方法更新用户输入的值 return <input value={this.state.name} onChange={this.getInput} /> } }
2、不受state控制的为非受控组件
- 利用ref来获取元素dom,通过操作dom拿到数据
class Com extends React.Component{ getInput=()=>{ let val = this.refs.userName.value console.log(val) } render(){ return ( <div> <input ref='userName' /> <button onClick={this.getInput}>get</button> </div> ) } }
四、生命周期(常用)
1、挂载过程
- componentWillMount()
- 组件已经经历过constructor()初始化但是还未渲染dom
- 用的比较少
- componentDidMount()
- 组件第一次渲染完成,此时dom节点已经生成
- 这里可以调用ajax请求,setData后组件会重新渲染
2、更新过程
- componentWillReceiveProps(nextProps)
- 组件初始化的时候不会调用该生命周期
- shouldComponentUpdate(nextProps,nextState)
- nextProps 未更新之前的state的值
- 可以在这一步来决定是否渲染页面
- 必须return一个布尔值,return值的类型不对,或则不return都会报错
- nextState 更新之后state的值
五、脚手架
- npm i -g create-react-app
- create-react-app xxxx(文件名)