特徴
1. ユーザーインターフェイスを構築するための JavaScript ライブラリ
2. Facebook によって作成
3. コンポーネント化、一方向データフロー、ライフサイクル、仮想 dom、フックなど
jsx 構文
jsx 構文は、JavaScript と html を混合した記述方法である js で html テンプレートを記述する場合に便利です。簡単に言えば、jsx は html と js を組み合わせたものです。
特徴:
1. ルート ノードは 1 つだけです
2. {} で js 式を囲みます
3. {/ comment content/ }
4. classNmae でクラス名を定義します
5. スタイル オブジェクトは自動的に作成されます6. 配列には
html を含めることができ、自動的に展開されます。
// 导入css
import './App.css'
// 定一个样式对象
var styles={
fontSize:"48px",
textAlign:"center",
color:"green"
}
// 定义一个数组
var arr=[
<h2>我是老大</h2>,
<p>p标签</p>,
<a href='http://www.baidu.com'>百度</a>
]
// 创建App实例
function App(){
// 返回一段html节点
return <div>
<h1 className="active">你好react</h1>
<p style={
styles}>学好react,月薪过两万</p>
{
arr}
{
/*<p>{2+4}</p>
<p>{5>10?"大于10":"他还是一个孩子"}</p>*/}
</div>
}
// 导出
export default App;
インポートされた CSS ファイル App.css
.active{
background-color: #f70;
color: #fff;
}
州
React コンポーネントの状態/データ
this.setState({k: new value})
状態が変化すると、その状態を参照するビューが自動的に更新されます
コンポーネントに反応する
機能コンポーネント、クラスコンポーネント
1. 機能コンポーネント
function App(){
return (
<div>
{
/* 页面渲染 */}
</div>
)
}
export default App;
2. クラスのコンポーネント
// 导入组件
import React,{
Component} from "react";
// 创建一个class类
class App extends Component{
// 类的构造函数
constructor(props){
// 调用父组件构造函数
super(props);
// 自定义 状态数据
this.state={
num:5}
}
// 渲染内容
render(){
return <div>
<h1>App</h1>
<p>{
this.state.num}</p>
</div>
}
}
// 导出App组件
export default App;
機能コンポーネントとクラスコンポーネントの違い
1. 機能コンポーネントは通常表示され、クラスコンポーネントは通常コンテナとして使用されます。
2. クラス コンポーネントは状態を持つことができますが、関数コンポーネントは状態を持たず、クラス コンポーネントはデータの管理に使用されます。
3. 関数コンポーネントにはこれがありませんが、クラスコンポーネントにはこれがあります。
4. 関数コンポーネントにはライフサイクルがありませんが、クラスコンポーネントにはライフサイクルがあります。
テンプレートの構文
1. テキスト レンダリング
{} にはテキスト コンテンツが含まれます
。HTML テキストにはタグを認識するために「dangerouslySetInnerHTML」を追加する必要があります。
2. 条件付きレンダリング
3. リスト レンダリング
function App(){
var isLog=true;
var list=["react","vue","jQuery","angular"];
var str1="我爱我的故乡";
var str2= "<p>我爱<strong>我家</strong></p>"
return (<div>
<div>{
str1}</div>
{
/* html文本渲染 __html包含两个下划线 */}
<div dangerouslySetInnerHTML={
{
__html:str2}}></div>
<h1>列表渲染</h1>
{
list.map(item=>(<p key={
item}>{
item}</p>))
}
<h1>模板语法-条件渲染</h1>
{
isLog&&<h3>欢迎回来</h3>}
{
isLog?<h3>欢迎回来主人</h3>:<h3>请登录</h3>}
</div>)
}
export default App
イベント
1. ネイティブ JS イベントと一致し、イベント名はキャメル ケースで表示されます (右側はキャメル ケースで名前が付けられます)
onclick onClick
onmouseover onMouseover
2. イベントは常に関数に応答します。
import React, {
Component } from 'react';// imrc
class App extends Component {
// ccc
constructor(props) {
super(props);
this.state={
num:5}
}
say=()=>{
alert("中华文化博大精深")
}
doit=(msg)=>{
alert("我爱"+msg)
}
add=(n=1)=>{
// state更新必须由setState方法进行
this.setState({
num:this.state.num+n})
}
state = {
}
render() {
return ( <div>
<h1>更新状态state</h1>
<button onClick={
this.add.bind(this,5)}>{
this.state.num}:传参5</button>
<button onClick={
()=>{
this.add(2)}}>{
this.state.num}:传参</button>
<button onClick={
()=>this.add()}>{
this.state.num}</button>
<h1>添加事件</h1>
<p onClick={
this.doit.bind(this,"河南")}>河南-传参</p>
<p onClick={
()=>this.doit("祖国")}>祖国-传参</p>
<p onClick={
this.say}>钓鱼岛</p>
<p onClick={
()=>alert("坐高铁去拉萨")}>风景好美</p>
<p><button>{
this.state.num}</button></p>
</div> );
}
}
// this.doit.bind(this,"河南")
// 基于doit返回一个新的函数,新函数的this是bind的第一个参数,新函数的参数是bind的第二个参数
export default App;
フォームデータバインディング
import React, {
Component } from 'react'
class App extends Component {
// constructor(props) {
// super(props);
// }
state = {
msg:'你好react'
}
// 用箭头函数保障this正确性
// 事件对象(input)对象对应的值
updateMsg=e=>this.setState({
msg:e.target.value})
render() {
return (
<div>
<h1>表单数据的绑定</h1>
<p>{
this.state.msg}</p>
{
/* value与onChange都应该同时绑定 */}
<input
type="text"
value={
this.state.msg}
onChange={
this.updateMsg}
/>
</div>
);
}
}
export default App;
コンポーネント
1. コンポーネントを定義します (コンポーネント名の最初の文字は大文字にする必要があります)
2. App.js にコンポーネントをインポートします
import Steper from './components/Steper'
3. App.jsのレンダリング関数で使用する
render() {
return ( <div>
<Steper ></Steper><
</div> );
}
関数パラメータ
1. 親から子、
親コンポーネントへprops
を渡す 子コンポーネントは
props.numを受け取る
2. 子から親へ渡し、親コンポーネントから渡されたpropsのコールバック関数を実行 子
から親:コールバック関数を実行
親コンポーネント:
関数を定義そして関数を子コンポーネントに渡します
updateSize=(n)=>this.setState({size:n})
サブコンポーネント:
props.updateSize() の実行は、親コンポーネントStepper App.js
の updateSize メソッドの実行と同等です。
import React,{
Component} from 'react'
// 导入组件
import Steper from './components/Steper'
class App extends Component {
state = {
msg:'',
size:100,
min:1,
max:110,
};
// 父组件定义一个更新size的
updateSize=n=>this.setState({
size:n})
render() {
return ( <div>
{
/* 把方法通过props方式传递给子组件 */}
<Steper
updateSize={
this.updateSize}
num={
this.state.size}
min={
this.state.min}
max={
this.state.max}
></Steper><br/>
{
/* <Steper num={10}></Steper><br/>
<Steper></Steper> */}
<div
style={
{
border:"1px solid red",
width:this.state.size+"px",
height:this.state.size+"px",
}}
>
{
this.state.size}
</div>
</div> );
}
}
export default App;
Steper.js
import React, {
Component } from 'react'
class Steper extends Component {
constructor(props) {
super(props);
this.state = {
// count的默认值是props的num值
count:props.num,
mins:props.min,
maxs:props.max
}
}
// 给表单定义双向绑定
updateCount=e=>{
this.setState({
count:e.target.value})
// 执行父组件的updateSize方法
this.props.updateSize(e.target.value)
}
render() {
return ( <span>
<button
disabled={
this.state.count<=this.state.mins}
onClick={
()=>{
this.setState({
count:this.state.count*1-1},()=>{
// 更新完毕,执行props.updateSize
this.props.updateSize(this.state.count)
})
}}
>-</button>
<input
type="text"
onChange={
this.updateCount}
value={
this.state.count} />
<button
disabled={
this.state.count>=this.state.maxs}
onClick={
()=>{
this.setState({
count:this.state.count*1+1},()=>{
// 更新完毕,执行props.updateSize
this.props.updateSize(this.state.count)
})
}}
>+</button>
</span> );
}
}
// 定义默认参数
Steper.defaultProps={
num:1
}
export default Steper;
// 首字母要求大写
分析する
ビルドデザイン
1. コンテナの構成要素ページ、ステート付き
コンテナ、ステート処理メソッドデータセンター、データ処理センタークラスコンポーネント2. ビューコンポーネント表示コンテンツ、ビューコンポーネントはステート関数コンポーネントを含まないプロパティのみ
ドムリファレンス
1. dom 参照メソッドimport {createRef} を 'react' からインポートして作成します
。 2. dom 参照
var inp=createRef()を作成します
。 3. 参照
4.現在参照されている dom ノード
inp.current.value の値を取得します。
例:
import {
createRef} from 'react';
// 创建一个dom引用
var inp=createRef();
function Item(props){
// 勾选时候,执行组件的updateitem
function updateItem(e){
// 执行props的OnUpdateItem(原来的item,最新item)
props.onUpdateItem(props.item,{
...props.item,done:e.target.checked});
}
// 双击编辑功能
// 确定编辑
function sureEdit(){
// 单击确定 更新item把状态变成1
// 把item的title值更新inp的值
// 更新item
props.onUpdateItem(props.item,{
...props.item,status:1,title:inp.current.value})
}
// 取消编辑
function cancleEdit(){
// 单击取消 把状态改为1,回到正常状态
props.onUpdateItem(props.item,{
...props.item,status:1})
}
// 去编辑
function toEdit(){
// 更新item 把状态改为2
// 组件就会显示编辑状态
props.onUpdateItem(props.item,{
...props.item,status:2})
setTimeout(()=>{
inp.current.value=props.item.title;
},100)
}
return (<div>
{
props.item.status===1?<div>
{
/* 正常状态 */}
<input type="checkbox" checked={
props.item.done} onChange={
e=>updateItem(e)} />
<span onDoubleClick={
toEdit}>{
props.item.title}</span>
{
/* 单击props传递过来的onDelete方法 */}
<button onClick={
()=>props.onDelete(props.item)}>x</button>
</div>:<div>
{
/* 编辑状态 */}
<input ref={
inp} />
<button onClick={
sureEdit}>确定</button>
<button onClick={
cancleEdit}>取消</button>
</div>}
</div>)
}
export default Item;
// props的数据在Item只读
// input必须绑定value和onchange绑定的 改变props
// 要是函数组件也会一个state,事件解决(hooks功能)